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; } }, }