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

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

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

1. <template>
2.   <el-tree ref="treeRef" :data="tree" show-checkbox node-key="id" :props="defaultProps"> </el-tree>
3. </template>
5. <script setup>
6. import { ref, onMounted } from 'vue';
8. const tree = ref([
9.   {
10.     id: 1,
11.     label: '一级 1',
12.     children: [
13.       {
14.         id: 2,
15.         label: '二级 2',
16.         children: [
17.           { id: 3, label: '三级 3' },
18.           { id: 4, label: '三级 4' },
19.         ],
20.       },
21.     ],
22.   },
23.   {
24.     id: 5,
25.     label: '一级 5',
26.     children: [
27.       { id: 6, label: '二级 6' },
28.       { id: 7, label: '二级 7' },
29.     ],
30.   },
31.   {
32.     id: 8,
33.     label: '一级 8',
34.     children: [
35.       { id: 9, label: '二级 9' },
36.       {
37.         id: 10,
38.         label: '二级 10',
39.         children: [
40.           { id: 11, label: '三级 11' },
41.           { id: 12, label: '三级 12' },
42.         ],
43.       },
44.     ],
45.   },
46. ]);
47. // 树组件
48. const treeRef = ref(null);
49. const defaultProps = ref({ children: 'children', label: 'label' });
50. // 回显数据
51. const dataPlayback = ref([1, 2, 4, 5, 6, 7, 8, 10, 12]);
53. onMounted(() => {
54.   // 回显数据 赋值
55.   treeRef.value.setCheckedKeys(dataPlayback.value);
56. });
57. </script>

复制代码

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

修复方法如下：

1. <template>
2.   <el-tree ref="treeRef" :data="tree" show-checkbox node-key="id" :props="defaultProps"> </el-tree>
3.   <el-button @click="submit">提交</el-button>
4.   <span> {{ submitData }}</span>
5. </template>
7. <script setup>
8. import { ref, onMounted } from 'vue';
10. const tree = ref([
11.   {
12.     id: 1,
13.     label: '一级 1',
14.     children: [
15.       {
16.         id: 2,
17.         label: '二级 2',
18.         children: [
19.           { id: 3, label: '三级 3' },
20.           { id: 4, label: '三级 4' },
21.         ],
22.       },
23.     ],
24.   },
25.   {
26.     id: 5,
27.     label: '一级 5',
28.     children: [
29.       { id: 6, label: '二级 6' },
30.       { id: 7, label: '二级 7' },
31.     ],
32.   },
33.   {
34.     id: 8,
35.     label: '一级 8',
36.     children: [
37.       { id: 9, label: '二级 9' },
38.       {
39.         id: 10,
40.         label: '二级 10',
41.         children: [
42.           { id: 11, label: '三级 11' },
43.           { id: 12, label: '三级 12' },
44.         ],
45.       },
46.     ],
47.   },
48. ]);
49. // 树组件
50. const treeRef = ref(null);
51. const defaultProps = ref({ children: 'children', label: 'label' });
52. // 回显数据
53. const dataPlayback = ref([1, 2, 4, 5, 6, 7, 8, 10, 12]);
54. // 提交数据
55. const submitData = ref([]);
57. // 提取含有 children 的所有节点id
58. const getContainChildrenNode = (data) => {
59.   let ids = [];
60.   const recurse = (item) => {
61.     if (Array.isArray(item)) {
62.       item.forEach((node) => {
63.         if (node.children && node.children.length) {
64.           // 含有子项的节点id
65.           ids.push(node.id);
66.           recurse(node.children);
67.         }
68.       });
69.     }
70.   };
71.   // 调用递归函数
72.   recurse(data);
73.   // 返回含有 children 的所有节点id
74.   return ids;
75. };
77. // 提交
78. const submit = () => {
79.   submitData.value = [...treeRef.value.getCheckedKeys(), ...treeRef.value.getHalfCheckedKeys()]; //得到 所有选中的节点id [ 4, 5, 6, 7, 12, 1, 2, 8, 10 ]
80. };
82. onMounted(() => {
83.   // 收集所有顶级节点的值
84.   const nodeIds = getContainChildrenNode(tree.value); // 得到 含有 children 的所有节点id [1, 2, 5, 8, 10]
86.   // 过滤掉 顶级节点的值
87.   const treeVal = dataPlayback.value.filter((item) => !nodeIds.includes(item)); // 得到 回显数据 [4, 6, 7, 12]
89.   // 回显数据 赋值
90.   treeRef.value.setCheckedKeys(treeVal);
91. });
92. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。