antd vue Checkbox 多选框

先看官网例子

<template>
  <div>
    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
      <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
        Check all
      </a-checkbox>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
  </div>
</template>
<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
export default {
  data() {
    return {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions,
    };
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
  },
};
</script>

属性	默认值	说明
checkedList	[]	选中的列表
indeterminate	true	在实现全选效果时，你可能会用到indeterminate属性
checkAll	false	全选是否选中
plainOptions	[‘Apple’, ‘Pear’, ‘Orange’]	数据列表
v-model	“checkedList”	这里很容易被忽略 和选中子级效果相关

自定义选项时很容易出错的地方

当你的 plainOptions 是 多维对象的时候 :value="item" 这里 应该是 子级 而不是 id 或者 key

<a-checkbox-group v-model="checkedList" @change="onChange" class="w-full grid grid-cols-3 gap-6">
	<a-checkbox v-for="(item, index) in authOptions" :value="item" :key="index" style="margin-left: 0;">
	 	{{ item.auth_name }}
	</a-checkbox>
</a-checkbox-group>

[
	{
		id: 101,
		name: 'name101',
	},
	{
		id: 101,
		name: 'name101',
	}
	{
		id: 101,
		name: 'name101',
	}
]

:value="item" 这里 对应的是 {id: 101,name: 'name101'}
导致无法全选, 反选的原因就是这里