Vue3 element-plus el-tree-select 实现显示只显示父节点(当父节点下所有子节点都选中时)

Vue3，element-plus，el-tree-select

示意图：

Vue

<template>
  <el-tree-select
    v-model="value"
    :data="data"
    multiple
    show-checkbox
    check-on-click-node
    @check = "handleSelect">
  </el-tree-select>
</template>

JS

通过触发check事件后，调用handleSelect方法来修改绑定的value值

1. flatMap：将 nodes 中的所有 children 展平为一个数组。
2. map：提取每个子节点的 value。
3. filter：保留不在 childrenValues 中的元素。

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()

const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const handleSelect = (currentNode,checkedNodes) => {
  const childrenValues = checkedNodes.checkedNodes.flatMap(item => item?.children || []).map(child => child.value);
  value.value = checkedNodes.checkedKeys.filter(i => !childrenValues.includes(i));
}
</script>

element示例

方法二：使用 ant-design-vue 的 a-tree-select

官方文档