Element-plus、Element-ui之Tree 树形控件回显Bug问题。

需求：提交时，需要把选中状态和半选中状态的数据id提交。如图所示：

数据回显时，会出现代码如下：

javascript 复制代码

<template>
  <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" :props="defaultProps"> </el-tree>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const data = ref([
  {
    id: 1,
    label: '一级 1',
    children: [
      {
        id: 2,
        label: '二级 2',
        children: [
          { id: 3, label: '三级 3' },
          { id: 4, label: '三级 4' },
        ],
      },
    ],
  },
  {
    id: 5,
    label: '一级 5',
    children: [
      { id: 6, label: '二级 6' },
      { id: 7, label: '二级 7' },
    ],
  },
  {
    id: 8,
    label: '一级 8',
    children: [
      { id: 9, label: '二级 9' },
      {
        id: 10,
        label: '二级 10',
        children: [
          { id: 11, label: '三级 11' },
          { id: 12, label: '三级 12' },
        ],
      },
    ],
  },
]);
// 树组件
const treeRef = ref(null);
const defaultProps = ref({ children: 'children', label: 'label' });
// 回显数据
const dataPlayback = ref([1, 2, 4, 5, 6, 7, 8, 10, 12]);

onMounted(() => {
  // 回显数据 赋值
  treeRef.value.setCheckedKeys(dataPlayback.value);
});
</script>

数据回显问题，如图所示：

修复方法如下：

javascript 复制代码

<template>
  <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" :props="defaultProps"> </el-tree>
  <el-button @click="submit">提交</el-button>
  <span> {{ submitData }}</span>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const data = ref([
  {
    id: 1,
    label: '一级 1',
    children: [
      {
        id: 2,
        label: '二级 2',
        children: [
          { id: 3, label: '三级 3' },
          { id: 4, label: '三级 4' },
        ],
      },
    ],
  },
  {
    id: 5,
    label: '一级 5',
    children: [
      { id: 6, label: '二级 6' },
      { id: 7, label: '二级 7' },
    ],
  },
  {
    id: 8,
    label: '一级 8',
    children: [
      { id: 9, label: '二级 9' },
      {
        id: 10,
        label: '二级 10',
        children: [
          { id: 11, label: '三级 11' },
          { id: 12, label: '三级 12' },
        ],
      },
    ],
  },
]);
// 树组件
const treeRef = ref(null);
const defaultProps = ref({ children: 'children', label: 'label' });
// 回显数据
const dataPlayback = ref([1, 2, 4, 5, 6, 7, 8, 10, 12]);
// 提交数据
const submitData = ref([]);

// 提取含有 children 的所有节点id
const getContainChildrenNode = (data) => {
  let ids = [];
  const recurse = (item) => {
    if (Array.isArray(item)) {
      item.forEach((node) => {
        if (node.children && node.children.length) {
          // 含有子项的节点id
          ids.push(node.id);
          recurse(node.children);
        }
      });
    }
  };
  // 调用递归函数
  recurse(data);
  // 返回含有 children 的所有节点id
  return ids;
};

// 提交
const submit = () => {
  submitData.value = [...treeRef.value.getCheckedKeys(), ...treeRef.value.getHalfCheckedKeys()]; //得到 所有选中的节点id [ 4, 5, 6, 7, 12, 1, 2, 8, 10 ]
};

onMounted(() => {
  // 收集所有顶级节点的值
  const nodeIds = getContainChildrenNode(data.value); // 得到 含有 children 的所有节点id [1, 2, 5, 8, 10]

  // 过滤掉 顶级节点的值
  const treeVal = dataPlayback.value.filter((item) => !nodeIds.includes(item)); // 得到 回显数据 [4, 6, 7, 12]

  // 回显数据 赋值
  treeRef.value.setCheckedKeys(treeVal);
});
</script>