uview复选框 单选 全选

<template>
  <div>
    <u-checkbox-group ref="checkboxGroup" @change="checkboxGroupChange">
      <u-checkbox
        v-for="(item, index) in list"
        :key="index"
        :name="item.name"
        :disabled="item.disabled"
        :checked="item.checked"
        @change="checkboxChange(item, index)"
      >
        {{ item.name }}
      </u-checkbox>
    </u-checkbox-group>

    <button @click="checkedAll">全选</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: 'apple',
          checked: false,
          disabled: false
        },
        {
          name: 'banner',
          checked: false,
          disabled: false
        },
        {
          name: 'orange',
          checked: false,
          disabled: false
        }
      ]
    };
  },
  methods: {
    checkboxChange(item, index) {
      // 修改list数组中对应元素的选中状态
      this.$set(this.list, index, {
        ...item,
        checked: item.checked
      });
    },
    checkboxGroupChange() {
      // 处理checkbox-group的change事件
    },
    checkedAll() {
      // 将list数组中所有元素的选中状态都设置为true
      this.list.forEach((item, index) => {
        item.checked = true;
        this.$set(this.list, index, {
          ...item,
          checked: item.checked
        });
      });
    }
  }
};
</script>

:checked来控制的  状态是否选中  默认复制过来的是不带：checked属性的