代码:
<template> <!-- 28.报警管理-报警列表 --> <view class="batchManagement"> <!-- 自定义导航栏 --> <view style=""> <!-- 2.0.19支持autoBack,默认为false --> <u-navbar title="报警管理" @rightClick="rightClick" :placeholder="true" :autoBack="true"> <view class="batchManagement_text" slot="right"> 历史报警 </view> </u-navbar> </view> <!-- 设备故障 --> <view class="Batch_number_public"> <view class="Batch_number_public_a"> <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange"> <u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name" :checked="item.checked" shape="circle"> </u-checkbox> </u-checkbox-group> </view> <view class="Batch_number_public_b"> <view class=""> <text class="aSo1_b">设备故障</text> </view> <view class=""> <text class="aSo1_a">#1号产线   搅拌机</text> </view> </view> <view class="Batch_number_public_c"> 处理 </view> </view> <!-- 处理 --> <view class="merge_Public_Button"> <view class="merge_Public_Button_a" style="margin-left: 15rpx;margin-top: 15rpx;"> <u-checkbox-group name="allCheck" @change="changeAll"> <u-checkbox :customStyle="{marginBottom: '8px'}" shape="circle"> </u-checkbox> </u-checkbox-group> </view> <view class="merge_Public_Button_b"> 全选 </view> <view class="merge_Public_Button_c"> <text>共</text> <text style="color: #F99B04;">3</text> <text>项</text> </view> <view class="merge_Public_Button_d"> 处理 </view> </view> </view> </template> <script> export default { 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统计 } }, onShow() { }, 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; } }, } } </script> <style> page { background-color: #F9F9FC; } /* 自定义导航栏 */ .batchManagement_text { font-size: 32rpx; ; color: #666666; } .batchManagement { width: 750rpx; background-color: #F9F9FC; } </style>
关键代码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; } }, }
。