<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>
uniapp checkbox 默认选中
最新推荐文章于 2024-05-27 16:09:36 发布