uniapp使用uview-ui的checkbox复选框,全选与全不选功能
代码:
class="batchManagement"> ""> "报警管理" @rightClick="rightClick" :placeholder="true" :autoBack="true"> class="batchManagement_text" slot="right"> 历史报警 class="Batch_number_public"> class="Batch_number_public_a"> "checkboxValue1" placement="column" @change="checkboxChange"> "{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name" :checked="item.checked" shape="circle"> class="Batch_number_public_b"> class=""> class="aSo1_b">设备故障 class=""> class="aSo1_a">#1号产线   搅拌机 class="Batch_number_public_c"> 处理 class="merge_Public_Button"> class="merge_Public_Button_a" style="margin-left: 15rpx;margin-top: 15rpx;"> "allCheck" @change="changeAll"> "{marginBottom: '8px'}" shape="circle"> class="merge_Public_Button_b"> 全选 class="merge_Public_Button_c"> 共 "color: #F99B04;">3 项 class="merge_Public_Button_d"> 处理
关键代码js参数:
data() { return { // value: '', keyword: '', checkboxValue1: [], checkboxValue2: [], // 基本案列数据 checkboxList1: [ { id:1, name: '设备故障', disabled: false, checked: false }, { id:2, name: '设备故障2', disabled: false, checked: false } ], allCheck: { name: '全选', values: 'all', checked: true }, checkLength: 0, //用来计录全选、全不选的checked统计 } },
关键代码js方法:
methods: { checkboxChange(n) { //=============单个选中 console.log('change', n); this.checkLength = n.length; }, changeAll(e, data) { //========全选方法 // console.log('点击全选'); if(this.checkLength == this.checkboxList1.length){ //当前选中的个数等于列表的数,说明当前已经全部选中了 this.checkboxList1.forEach(function(item, index){ item.checked = false; //设置全不选 }) this.checkLength = 0; }else{ //返之说明当前并没有全部选中 this.checkboxList1.forEach(function(item, index){ item.checked = true; //设置全选中 }) this.checkLength = this.checkboxList1.length; } }, }