vue3 基于el-tree增加、删除节点（非TypeScript 写法）

话不多说，直接贴代码

1. <template>
2.   <div class="custom-tree-container">
3.     <!-- <p>Using render-content</p>
4.     <el-tree style="max-width: 600px" :data="dataSource" show-checkbox node-key="id" default-expand-all
5.       :expand-on-click-node="false" :render-content="renderContent" /> -->
6.     <p>Using scoped slot</p>
7.     <el-tree style="max-width: 600px" :data="dataSource" show-checkbox node-key="id" default-expand-all
8.       :expand-on-click-node="false">
9.       <template #default="{ node, data }">
10.         <span class="custom-tree-node">
11.           <span>{{ node.label }}</span>
12.           <span>
13.             <a @click="append(data)"> Append </a>
14.             <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a>
15.           </span>
16.         </span>
17.       </template>
18.     </el-tree>
19.   </div>
20. </template>
22. <script>
23. import { reactive, ref, toRefs } from 'vue'
24. // import {Node} from 'element-plus/es/components/tree/src/model/node'
26. export default {
27.   name: 'part',
28.   setup() {
29.     const state = reactive({
30.       dataSource: [
31.         {
32.           id: 1,
33.           label: 'Level one 1',
34.           children: [
35.             {
36.               id: 4,
37.               label: 'Level two 1-1',
38.               children: [
39.                 {
40.                   id: 9,
41.                   label: 'Level three 1-1-1'
42.                 }
43.               ]
44.             }
45.           ]
46.         }
47.       ]
48.     })
50.     const append = (data) => {
51.       let treeNodeId = data.$treeNodeId;
52.       console.info(data)
53.       // alert('当前id'+data.id)
54.       // alert(data.$treeNodeId)
55.       let id =data.id*100+1
56.       const newChild = { id: id, label: data.label+'-'+id, children: [] };
57.       if (!data.children) {
58.         data.children = [];
59.       }
60.       data.children.push(newChild);
61.       // state.dataSource = [data];
62.     }
64.     const remove = (node, data) => {
65.       const parent = node.parent;
66.       const children = parent.data.children || parent.data;
67.       const index = children.findIndex(d => d.id === data.id);
68.       children.splice(index, 1);
69.       // dataSource.value = [...dataSource.value];
70.     };
72.     return {
73.       ...toRefs(state),
74.       append,
75.       remove
76.     }
77.   }
78. }
83. </script>
85. <style>
86. .custom-tree-node {
87.   flex: 1;
88.   display: flex;
89.   align-items: center;
90.   justify-content: space-between;
91.   font-size: 14px;
92.   padding-right: 8px;
93. }
94. </style>

复制代码

结果如下

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