用google翻译做多语言网站,如何快速推广一个网站,行政机关 网站源码,动易网站后台前言
公司的app项目使用的uniapp#xff0c;项目里有一个可勾选的卡片功能#xff0c;效果图如下#xff1a; 找了一圈没找到什么太好的组件#xff0c;于是就自己简单写了一个#xff0c;记录一下。避免以后还会用到
代码
templateview classcard-…前言
公司的app项目使用的uniapp项目里有一个可勾选的卡片功能效果图如下 找了一圈没找到什么太好的组件于是就自己简单写了一个记录一下。避免以后还会用到
代码
templateview classcard-selectioncheckbox-group changecheckboxChangeview v-for(item, index) in checkboxList :keyindex!-- 顶部标题部分 --slot nameheader :rowitem :rowIndexindex/slotlabelview v-ifitem.checkboxShow classcard-selection-item :styleitemStyle!-- 左侧复选框 --view classitem1checkbox :valueitem[rowKey] :disableditem.checkboxDisabled:checkeditem.checkboxChecked //view!-- 右侧自定义插槽内容 --view classitem2slot namedefault :rowitem/slot/view/view/label/view/checkbox-group/view
/templatescriptexport default {props: {// 唯一值rowKey: {type: String,default: id},// 样式itemStyle: {type: String,default: }},data() {return {// 列表checkboxList: [],// 记录已经勾选了的数据hasCheckedList: []}},methods: {// 初始化init(list) {this.checkboxList []// 添加选中、禁用、是否显示等属性list.forEach(item {item.checkboxChecked falseitem.checkboxDisabled falseitem.checkboxShow truethis.checkboxList.push(item)})},// 复选框勾选checkboxChange(e) {this.hasCheckedList e?.detail?.value || []//console.log(复选框勾选数据, this.hasCheckedList)// 返回给父组件勾选的值const checkedList this.checkboxList.filter(item this.hasCheckedList.includes(item[this.rowKey]))// 修改被勾选的数据的checkboxCheckedthis.checkboxList.forEach(item {item.checkboxChecked this.hasCheckedList.includes(item[this.rowKey])})//console.log(数据列表,this.checkboxList)this.$emit(checkboxChange, {checkedValueList: this.hasCheckedList,checkedList: checkedList})console.log(复选框勾选数据, {checkedValueList: this.hasCheckedList,checkedList: checkedList})},// 复选框禁用逻辑checkboxDisabled(callback) {this.checkboxList.forEach(item {item.checkboxDisabled Boolean(callback(item))})},// 复选框勾选逻辑checkboxCheckd(callback) {this.checkboxList.forEach(item {//console.log(复选框勾选, item, callback(item))item.checkboxChecked Boolean(callback(item))})// 自动勾选不会触发checkboxChange事件这里需要手动更新let valueList this.checkboxList.filter(item item.checkboxChecked).map(item item[this.rowKey])this.checkboxChange({detail:{value:valueList}})this.$forceUpdate()},// 清空勾选clearChecked() {this.checkboxList.forEach(item {item.checkboxChecked false})// 自动勾选不会触发checkboxChange事件这里需要手动更新let valueList this.checkboxList.filter(item item.checkboxChecked).map(item item[this.rowKey])this.checkboxChange({detail:{value:valueList}})},// 清空禁用clearDisabled() {this.checkboxList.forEach(item {item.checkboxDisabled false})},// 控制数据的显示和隐藏用于可能出现数据筛选的情况showCheckboxData(callback) {this.checkboxList.forEach(item {item.checkboxShow Boolean(callback(item))})}},}
/scriptstyle langscss scoped.card-selection-item {padding: 10px;display: flex;.item1 {width: 30px;height: 30px;flex-shrink: 0;}.item2 {flex-shrink: 1;width: 100%;}}
/style没啥复杂的代码看一下代码就能知道如何使用。效果图如下
