elementui 半勾选状态

在 Element UI 中，可以使用 `indeterminate` 属性来实现半勾选状态。当某个节点的子节点被选中部分时，父节点可以显示成半勾选状态。

要在 Element UI 中使用半勾选状态，需要：

1. 在数据源中添加 `indeterminate` 字段，用来表示半勾选状态。
2. 在节点的渲染模板中，通过 `:indeterminate` 绑定到数据源的 `indeterminate` 字段，以实现动态控制半勾选状态的效果。
3. 通过监听节点的选中事件来更新父节点和子节点的半勾选状态。

以下是一个示例代码：

<template>
  <div>
    <el-tree
      :data="data"
      :props="defaultProps"
      node-key="id"
      @check-change="handleCheckChange"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '节点1',
          children: [
            {
              id: 11,
              label: '子节点1-1',
              children: [
                {
                  id: 111,
                  label: '子节点1-1-1',
                },
                {
                  id: 112,
                  label: '子节点1-1-2',
                },
              ],
            },
            {
              id: 12,
              label: '子节点1-2',
            },
          ],
        },
        // 其他节点...
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
        indeterminate: 'indeterminate',
      },
    };
  },
  methods: {
    handleCheckChange(data, checkedNodes) {
      // 更新节点的半勾选状态
      this.updateIndeterminateState(this.data);
    },
    updateIndeterminateState(nodes) {
      nodes.forEach((node) => {
        const children = node.children;
        const hasChecked = children.some((child) => child.checked === true);
        const hasUnchecked = children.some((child) => child.checked === false);

        if (hasChecked && hasUnchecked) {
          node.indeterminate = true;
        } else if (hasChecked) {
          node.indeterminate = false;
          node.checked = true;
        } else if (hasUnchecked) {
          node.indeterminate = false;
          node.checked = false;
        } else {
          node.indeterminate = false;
          node.checked = false;
        }

        if (children && children.length > 0) {
          this.updateIndeterminateState(children);
        }
      });
    },
  },
};
</script>