uniapp实现全选反选单选van-checkbox-group

在uni-app中，可以使用van-checkbox-group组件实现全选、反选和单选的功能。首先，你需要在data中定义一个数组来存储checkbox的选中状态：

data() {
  return {
    checkboxOptions: [
      { value: 'option1', text: '选项1', checked: false },
      { value: 'option2', text: '选项2', checked: false },
      { value: 'option3', text: '选项3', checked: false }
    ],
    isCheckedAll: false
  };
}

然后，在模板中使用van-checkbox-group和van-checkbox组件来展示和操作checkbox：

<template>
  <van-checkbox-group v-model="checkboxOptions">
    <van-checkbox v-for="(option, index) in checkboxOptions" :key="index" :name="option.value" @change="onChange">
      {{ option.text }}
    </van-checkbox>
  </van-checkbox-group>
</template>

其中，v-model绑定checkboxOptions数组，使得checkbox的选中状态与数组中的checked属性关联起来。@change事件监听checkbox的变化，通过onChange方法来更新全选按钮的状态：

methods: {
  onChange() {
    this.isCheckedAll = this.checkboxOptions.every(option => option.checked);
  },
  toggleCheckAll() {
    this.isCheckedAll = !this.isCheckedAll;
    this.checkboxOptions.forEach(option => {
      option.checked = this.isCheckedAll;
    });
  }
}

toggleCheckAll方法用于切换全选按钮的状态，并更新checkboxOptions数组中的每个选项的checked属性。

最后，在模板中添加全选按钮和反选按钮：

<template>
  <div>
    <van-checkbox v-model="isCheckedAll" @change="toggleCheckAll">
      全选
    </van-checkbox>
    <van-checkbox @change="onChange">
      反选
    </van-checkbox>
  </div>
</template>

现在，你可以通过点击全选按钮、反选按钮或每个单选按钮来实现全选、反选和单选功能。