微网站开发周期,wordpress 国内 主题,宁波网站建设建站系统,网络工程师招聘目录
一、实现思路
二、实现步骤 ①view部分展示 ②JavaScript 内容 ③css中样式展示
三、效果展示
四、小结 注意事项 一、实现思路 点击商家复选框#xff0c;可选中当前商家下的所有商品。点击全选#xff0c;选中全部商家的商品
添加单个多选框#xff0c;在将多选…目录
一、实现思路
二、实现步骤 ①view部分展示 ②JavaScript 内容 ③css中样式展示
三、效果展示
四、小结 注意事项 一、实现思路 点击商家复选框可选中当前商家下的所有商品。点击全选选中全部商家的商品
添加单个多选框在将多选框绑定到全选按钮上。
uniapp内置的checkbox以及checkbox-group 无法依赖其事件实现全选样式固定难以修改。
二、实现步骤 ①view部分展示 viewview classcheckboxAllu-checkbox-group changeselectAllu-checkbox :checkedallChecked shapecircle activeColor#FF6C47/u-checkboxtext stylecolor: #FF6C47;全选/text/u-checkbox-group/viewtemplate v-for(item,index) in itemsListview classuni-list stylepadding: 32rpx :keyindexview classflex-betweenview classflexcheckbox-group changechangeitem(item) checked classcheckbox u-checkbox :valueitem.name :checkeditem.checked shapecircle activeColor#FF6C47//checkbox-groupview classflex-colomn stylemargin-left: 16rpx;view stylefont-size: 32rpx;color: #1A1A1A;{{item.name}}/viewview styleont-size: 24rpx;color: #666666;margin-top: 8rpx;textstyleont-size: 24rpx;color: #666666;学号/text{{item.number}}/view/view/viewview classflexview stylefont-size: 36rpx;color: #1A1A1A;{{item.num}}/viewview stylemargin-left: 16rpx;u-icon namearrow-right size15 color#999999/u-icon/view/view/view/view/template/view ②JavaScript 内容 scriptexport default {data() {return {checkList: [], //选中值allChecked: false, //是否全选title: checkbox 复选框,itemsList: [{name: 美国,number: 20030303,num: 90,checked: false}, {name: 美国,number: 20030303,num: 90,checked: false}, {name: 美国,number: 20030303,num: 90,checked: false}, {name: 美国,number: 20030303,num: 90,checked: false}, ]}},methods: {//单选changeitem(item) {item.checked !item.checkedif (!item.checked) {this.allChecked false} else {// 判断每一个列表是否是被选择的状态const cartList this.itemsList.every(item {return item.checked true})if (cartList) {this.allChecked true} else {this.allChecked false}}},//全选全不选selectAll() {this.allChecked !this.allCheckedif (this.allChecked) {this.itemsList.map(item {item.checked true})} else {this.itemsList.map(item {item.checked false})}},},}
/script ③css中样式展示 style langscss scoped.checkboxAll {margin-left: 80%;margin-top: 24rpx;}.uni-list-cell {justify-content: flex-start;}/style 三、效果展示 可以全部选择的状态也可以是单选状态。 四、小结 注意事项 u-checkbox-group标签中u-checkbox没有插槽不支持在里面写内容必须在u-checkbox-group外面写内容布局。u-checkbox-group---u-checkbox是可以实现的。
