可能会存在一些bug
以下是对每部分的一些解释
部分:
- 通过
标签来创建一个复选框组,该组中的所有复选框将共享一个数据模型。v-model指令用于绑定复选框组的值,即选中的复选框的名称。placement属性设置为"column",表示复选框列表将按列排列。@change事件监听器绑定到checkboxChange方法,当复选框状态发生变化时会触发这个方法。- 在复选框组内部,使用
v-for循环遍历checkboxList1数组中的每个对象,并创建相应的复选框。元素的属性设置了复选框的外观和标签,并将复选框的状态与数据模型中的选中状态关联。
部分:
- 在
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>