可能会存在一些bug
以下是对每部分的一些解释
<template>
部分:
- 通过
<u-checkbox-group>
标签来创建一个复选框组,该组中的所有复选框将共享一个数据模型。v-model
指令用于绑定复选框组的值,即选中的复选框的名称。placement
属性设置为"column"
,表示复选框列表将按列排列。@change
事件监听器绑定到checkboxChange
方法,当复选框状态发生变化时会触发这个方法。- 在复选框组内部,使用
v-for
循环遍历checkboxList1
数组中的每个对象,并创建相应的<u-checkbox>
复选框。<u-checkbox>
元素的属性设置了复选框的外观和标签,并将复选框的状态与数据模型中的选中状态关联。
<script>
部分:
- 在
data
中定义了两个数据属性:checkboxValue1
和checkboxList1
。checkboxValue1
用于存储选中的复选框的名称,初始为空数组。checkboxList1
包含了一个对象数组,每个对象代表一个复选框选项,包括名称和是否禁用的信息。- 在
methods
中定义了两个方法:
checkboxChange
方法用于处理复选框状态变化的事件。在这个示例中,它只是简单地打印出变化的信息。selectAll
方法用于全选功能。根据当前选中的复选框数量和总复选框数量,它更新checkboxValue1
数组以实现全选或取消全选的功能。同时,它也在控制台输出了选中状态的信息。
废话不多说直接上代码
<template>
<view>
<u-checkbox-group
v-model="checkboxValue1"
placement="column"
@change="checkboxChange"
>
<u-checkbox
shape="circle"
size='60rpx'
labelSize='50rpx'
:customStyle="{marginBottom: '8px'}"
v-for="(item, index) in checkboxList1"
:key="index"
:label="item.name"
:name="item.name"
>
</u-checkbox>
</u-checkbox-group>
<!-- 添加全选按钮 -->
<u-checkbox
shape="circle"
size='60rpx'
labelSize='50rpx'
:label="'全选'"
@change="selectAll"
>
</u-checkbox>
</view>
</template>
<script>
export default {
data() {
return {
checkboxValue1:[],
// 基本案列数据
checkboxList1: [{
name: '苹果',
disabled: false
},
{
name: '香蕉',
disabled: false
},
{
name: '橙子',
disabled: false
}
],
}
},
methods: {
checkboxChange(n) {
console.log('change', n);
},
selectAll() {
// 点击全选按钮时,更新所有复选框的选中状态
if (this.checkboxValue1.length === this.checkboxList1.length) {
this.checkboxValue1 = [];
console.log(this.checkboxValue1,1);
console.log(this.checkboxList1,1);
} else {
this.checkboxValue1 = this.checkboxList1.map(item => item.name);
console.log(this.checkboxValue1,1);
console.log(this.checkboxList1,2);
}
}
}
}
</script>