vue elementui 三级checkbox

vue element-ui 提供了多级的 checkbox 组件，可以实现三级的 checkbox 功能。

首先，需要在组件中引入 element-ui 的 checkbox 组件和三级数据。

<template>
  <div>
    <el-checkbox v-model="checkedAll" @change="handleCheckedAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkedCities">
      <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckedCitiesChange(city)" v-for="city in cities" :label="city.value" :key="city.id">
        {{ city.label }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: [
        {
          id: 1,
          label: '北京',
          value: 'beijing',
          children: [
            {
              id: 11,
              label: '东城区',
              value: 'dongcheng',
            },
            {
              id: 12,
              label: '西城区',
              value: 'xicheng',
            },
          ],
        },
        {
          id: 2,
          label: '上海',
          value: 'shanghai',
          children: [
            {
              id: 21,
              label: '浦东新区',
              value: 'pudong',
            },
            {
              id: 22,
              label: '徐汇区',
              value: 'xuhui',
            },
          ],
        },
      ],
      checkedCities: [], // 选中的城市
      checkedAll: false, // 全选状态
      isIndeterminate: false, //是否为半选状态
    };
  },
  methods: {
    handleCheckedAllChange() {
      this.checkedCities = this.checkedAll ? this.getCitiesValues() : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(city) {
      const checkedCount = this.checkedCities.filter(
        (item) => item.startsWith(city.value),
      ).length;
      if (checkedCount === city.children.length) {
        // 子节点全选中，则取消选中父节点
        this.checkedCities = this.checkedCities.filter(
          (item) => !item.startsWith(city.value),
        );
      } else {
        // 子节点未全部选中，则选中父节点
        this.checkedCities = [
          ...this.checkedCities,
          ...city.children.map((child) => child.value),
        ];
      }

      this.checkedAll = this.checkedCities.length === this.getCitiesValues().length;
      this.isIndeterminate =
        this.checkedCities.length > 0 &&
        this.checkedCities.length !== this.getCitiesValues().length;
    },
    getCitiesValues() {
      return this.cities.reduce((pre, cur) => {
        pre.push(cur.value);
        cur.children.forEach((child) => pre.push(child.value));
        return pre;
      }, []);
    },
  },
};
</script>

上面的示例中，我们使用了 `el-checkbox` 和 `el-checkbox-group` 组件来构建多级的 checkbox，`v-model` 指令绑定了选中的数据，通过 `@change` 事件监听选中状态的变化。

`handleCheckedAllChange` 方法用于全选/取消全选操作，更新选中的城市数组，并设置全选状态和半选状态。

`handleCheckedCitiesChange` 方法用于子节点的选中操作，根据子节点的选中状态更新父节点的选中状态，并更新全选状态和半选状态。

`getCitiesValues` 方法用于获取所有城市和子节点的值，方便判断全选状态和半选状态。

这样我们就可以实现三级 checkbox 的功能了。