<template>
<view>
<!-- 单个复选框 -->
<checkbox-group class="block" @change="checkboxChange">
<view class="cu-form-group">
<view class="title">复选选操作(checkbox)</view>
<checkbox :class="isChecked?'checked':''" :checked="isChecked?true:false" value="1"></checkbox>
</view>
</checkbox-group>
<!-- 多个复选框,带全选 -->
<view>
<checkbox-group class="block" @change="changeCheckbox">
<view v-for="item in checkboxData" :key="item.value">
<checkbox :value="String(item.value)" :checked="checkedArr.includes(String(item.value))"
:class="{'checked':checkedArr.includes(String(item.value))}"></checkbox>
<text>{{item.label}}</text>
</view>
</checkbox-group>
</view>
<view>
<checkbox-group @change="allChoose">
<label>
<checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox>
全选
</label>
</checkbox-group>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isChecked: false,
checkboxData: [{
'value': 0,
'label': '选项一'
},
{
'value': 1,
'label': '选项二'
},
{
'value': 2,
'label': '选项三'
},
{
'value': 3,
'label': '选项四'
},
{
'value': 4,
'label': '选项五'
},
{
'value': 5,
'label': '选项六'
},
{
'value': 6,
'label': '选项七'
},
{
'value': 7,
'label': '选项八'
},
{
'value': 8,
'label': '选项九'
},
{
'value': 9,
'label': '选项十'
}
],
checkedArr: [], //复选框选中的值
allChecked: false //是否全选
}
},
methods: {
// 单个复选框事件
checkboxChange(e) {
let values = e.detail.value;
if (values[0] == 1) {
this.isChecked = true;
} else {
this.isChecked = false;
}
},
// 多选复选框改变事件
changeCheckbox(e) {
this.checkedArr = e.detail.value;
// 如果选择的数组中有值,并且长度等于列表的长度,就是全选
if (this.checkedArr.length > 0 && this.checkedArr.length == this.checkboxData.length) {
this.allChecked = true;
} else {
this.allChecked = false;
}
},
// 全选事件
allChoose(e) {
let chooseItem = e.detail.value;
// 全选
if (chooseItem[0] == 'all') {
this.allChecked = true;
for (let item of this.checkboxData) {
let itemVal = String(item.value);
if (!this.checkedArr.includes(itemVal)) {
this.checkedArr.push(itemVal);
}
}
} else {
// 取消全选
this.allChecked = false;
this.checkedArr = [];
}
}
}
}
</script>
<style>
</style>
vue实现全选单选
于 2022-05-05 18:03:32 首次发布