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

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

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

<template><el-tree ref="treeRef" :data="tree" show-checkbox node-key="id" :props="defaultProps"> </el-tree>
</template><script setup>
import { ref, onMounted } from 'vue';const tree = 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>

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

修复方法如下：

<template><el-tree ref="treeRef" :data="tree" 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 tree = 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) {// 含有子项的节点idids.push(node.id);recurse(node.children);}});}};// 调用递归函数recurse(data);// 返回含有 children 的所有节点idreturn 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(tree.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>