antd-vue Checkbox Group 封装实现多选、全选、搜索过滤组件

以下是一个简化版的 CheckboxGroup 组件，用于演示如何封装一个多选、全选的组件：

<template>
  <div>
    <a-checkbox
      :indeterminate="indeterminate"
      :checked="checkAll"
      @change="onCheckAllChange"
    >
      全选
    </a-checkbox>
    <br />
    <a-checkbox-group
      :value="checkedList"
      @change="onChange"
    >
      <a-checkbox
        v-for="item in options"
        :key="item"
        :value="item"
      >
        {{ item }}
      </a-checkbox>
    </a-checkbox-group>
  </div>
</template>
 
<script>
import { Checkbox, CheckboxGroup } from 'ant-design-vue';
 
export default {
  components: {
    'a-checkbox': Checkbox,
    'a-checkbox-group': CheckboxGroup
  },
  props: {
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkedList: [],
      indeterminate: false,
      checkAll: false
    };
  },
  watch: {
    checkedList(newList) {
      this.indeterminate = !!newList.length && newList.length < this.options.length;
      this.checkAll = newList.length === this.options.length;
    }
  },
  methods: {
    onChange(checkedList) {
      this.checkedList = checkedList;
      this.$emit('change', this.checkedList);
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? this.options : [],
        indeterminate: false,
        checkAll: e.target.checked
      });
    }
  }
};
</script>

这个组件接收一个 options 数组作为它的选项，并且可以通过 v-model 进行双向绑定。它具有全选和取消全选的功能，并且会根据选中的项数设置 indeterminate 状态。在父组件中，你可以通过监听 change 事件来获取选中的值。