ANTD-Vue 多选框全选

<template>
  <div>
    <p>
      <!-- 
        开始介绍属性 ！！！
        @change：变化时回调函数
        v-model：选择框的状态
        indeterminate：只是单纯的一个过渡选择框状态的样式，
       （介于用户选择了大于0个选项，却没有全选的中间样式，说实话这个属性挺鸡肋的容易混淆视觉，我刚开始接触的时候很苦恼为什么要有一个这样的中间过渡样式，我关注的只是全选or全不选， 我会贴上详细的图片。）
        options：渲染可选项列表
        -->
      <a-checkbox
        @change="onChange"
        v-model="allCheckout"
        :indeterminate="indeterminate"
      >
        全选
      </a-checkbox>
    </p>
    <p>
      <a-checkbox-group
        v-model="checkedList"
        :options="plainOptions"
        @change="onlyChange"
      />
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      indeterminate: true, //只是单纯的一个样式状态罢了（我觉得没有意义）
      allCheckout: false, //全选选择框状态
      checkedList: ["HN", "GD"], //默认选中的项
      plainOptions: [
        { label: "河南", value: "HN" },
        { label: "河北", value: "HB" },
        { label: "江西", value: "JX" },
        { label: "广东", value: "GD" },
      ], //渲染可选项列表
    };
  },
  methods: {
    // 全选影响单选
    onChange() {
      if (this.allCheckout) {
        this.checkedList = this.plainOptions.map((item, index) => {
          return item.value;
        });
      } else {
        this.checkedList = [];
      }
    },
    // 单选状态
    onlyChange() {
      //过渡样式状态=存在默认选中项&&默认项的长度<全部列表的长度
      this.indeterminate =!!this.checkedList.length &&this.checkedList.length < this.plainOptions.length;
    },
  },
  watch: {
    // 监听单选状态列表是否影响全选标签状态
    checkedList(newValue, oldValue) {
      // 全选状态=最新单选列表长度===渲染可选项列表长度
      this.allCheckout = newValue.length === this.plainOptions.length;
    },
  },
};
</script>
<style scoped>
</style>

indeterminate未选择状态

其实这里indeterminate的状态并不重要，因为过渡样式并没有起效

indeterminate选择大于0且小于渲染数组长度过渡状态
indeterminate的状态起效

indeterminate全选状态
其实这里indeterminate的状态并不重要，因为过渡样式已经没有了