elementplus el-tree 二次封装支持设置删除后展示展开或折叠编辑复选框懒加 ...

本文先容了基于 ElementPlus 的 el-tree 组件进行二次封装的 TreeView 组件，使用 Vue3 和 JavaScript 实现。TreeView 组件通过 props 接收树形数据、设置项等，支持懒加载、节点展开/收起、节点点击、删除、编辑等操纵。组件内部通过 ref 管理树实例，并提供了 clearCurrentNode、setCurrentKey、setExpandedKeys 等方法供父组件调用。renderContent 方法用于自界说节点内容，支持根据设置表现删除和编辑按钮。事件处理函数通过 emit 将节点操纵通报给父组件，实现了组件与父组件的交互。样式部分通过 scoped 样式隔离，确保组件样式独立。
准备组件 TreeView treeUtils方法

• TreeView组件
  

1. <template>
2.   <div class="tree-container">
3.     <div v-if="isShowHeader" class="tree-header">
4.       <slot name="header"></slot>
5.     </div>
6.     <el-tree
7.       ref="treeRef"
8.       :data="treeData"
9.       :props="treeProps"
10.       highlight-current
11.       node-key="id"
12.       :render-content="renderContent"
13.       :lazy="lazy" :load="lazy ? loadNode : undefined"
14.       :default-expanded-keys="expandedKeys"
15.       :show-checkbox="showCheckbox"
16.       :check-strictly="checkStrictly"
17.       @node-click="handleNodeClick"
18.       @node-expand="handleNodeExpand"
19.       @node-collapse="handleNodeCollapse"
20.       @check="handleCheck" />
21.   </div>
22. </template>
24. <script setup>
25. import { defineProps, defineEmits, ref } from 'vue'
26. import { Delete, Edit } from '@element-plus/icons-vue'
27. import { handleNodeExpand as handleNodeExpandUtil, handleNodeCollapse as handleNodeCollapseUtil } from '@/utils/treeUtils'
29. // 接收父组件传来的数据
30. const props = defineProps({
31.   treeData: {
32.     type: Array,
33.     required: true,
34.   },
35.   treeProps: {
36.     type: Object,
37.     default: () => ({
38.       children: 'children',
39.       label: 'label',
40.       isLeaf: 'isLeaf'
41.     })
42.   },
43.   showDelete: {
44.     type: Boolean,
45.     default: false
46.   },
47.   showEdit: {
48.     type: Boolean,
49.     default: false
50.   },
51.   lazy: {
52.     type: Boolean,
53.     default: false
54.   },
55.   isShowHeader: {
56.     type: Boolean,
57.     default: false
58.   },
59.   showCheckbox: {
60.     type: Boolean,
61.     default: false
62.   },
63.   checkStrictly: {
64.     type: Boolean,
65.     default: false
66.   }
67. })
68. const applicationYear = ref('')
70. // 接收父组件传来的事件
71. const emit = defineEmits([
72.   'nodeClick',
73.   'loadChildren',
74.   'deleteNode',
75.   'nodeExpand',
76.   'nodeCollapse',
77.   'check'
78. ])
80. // 使用props中的treeProps
81. const { treeProps } = props
83. // 添加treeRef
84. const treeRef = ref(null)
86. // 展开的节点keys
87. const expandedKeys = ref([])
89. // 添加取消选中节点的方法
90. const clearCurrentNode = () => {
91.   if (treeRef.value) {
92.     treeRef.value.setCurrentKey(null)
93.   }
94. }
96. // 设置当前选中的节点
97. const setCurrentKey = (key) => {
98.   if (treeRef.value) {
99.     treeRef.value.setCurrentKey(key)
100.   }
101. }
103. // 设置展开的节点
104. const setExpandedKeys = (keys) => {
105.   expandedKeys.value = [...keys]
106. }
108. // 获取当前展开的节点
109. const getExpandedKeys = () => {
110.   return expandedKeys.value
111. }
113. // 处理复选框选中事件
114. const handleCheck = (data, { checkedKeys, checkedNodes }) => {
115.   emit('check', {
116.     data,
117.     checkedKeys,
118.     checkedNodes
119.   })
120. }
122. // 获取选中的节点
123. const getCheckedKeys = () => {
124.   return treeRef.value?.getCheckedKeys() || []
125. }
127. // 获取半选中的节点
128. const getHalfCheckedKeys = () => {
129.   return treeRef.value?.getHalfCheckedKeys() || []
130. }
132. // 设置选中的节点
133. const setCheckedKeys = (keys) => {
134.   treeRef.value?.setCheckedKeys(keys)
135. }
137. // 暴露方法给父组件
138. defineExpose({
139.   clearCurrentNode,
140.   setCurrentKey,
141.   setExpandedKeys,
142.   getExpandedKeys,
143.   getCheckedKeys,
144.   getHalfCheckedKeys,
145.   setCheckedKeys
146. })
148. const renderContent = (hFn, { node, data }) => {
149.   const content = [
150.     hFn('span', data[props.treeProps.label] || data.label)
151.   ]
152.   // 根据showDelete配置决定是否显示删除按钮
153.   if (props.showDelete) {
154.     content.push(
155.       hFn(
156.         'el-button',
157.         {
158.           type: 'danger',
159.           size: 'small',
160.           class: 'delete-btn',
161.           onClick: () => handleDeleteNode(node, data),
162.         },
163.         [
164.           hFn(Delete)
165.         ]
166.       )
167.     )
168.   }
170.   // 根据showDelete配置决定是否显示修改按钮
171.   if (props.showEdit) {
172.     content.push(
173.       hFn(
174.         'el-button',
175.         {
176.           type: 'danger',
177.           size: 'small',
178.           class: 'edit-btn',
179.           onClick: () => handleEditNode(data),
180.         },
181.         [
182.           hFn(Edit)
183.         ]
184.       )
185.     )
186.   }
187.   return hFn(
188.     'div',
189.     { class: 'tree-node' },
190.     content
191.   )
192. }
194. // 加载子节点数据
195. const loadNode = (node, resolve) => {
196.   if (!props.lazy) {
197.     return resolve([])
198.   }
200.   if (node.level === 0) {
201.     // 根节点直接返回初始数据
202.     return resolve(props.treeData)
203.   }
205.   // 触发父组件的事件来获取子节点数据
206.   emit('loadChildren', {
207.     node,
208.     resolve: (children) => {
209.       // 确保children是数组
210.       const childNodes = Array.isArray(children) ? children : []
211.       // 将子节点数据设置到当前节点的children属性中
212.       if (node.data) {
213.         node.data.children = childNodes
214.       }
215.       resolve(childNodes)
216.     }
217.   })
218. }
220. // 处理节点点击事件
221. const handleNodeClick = (data, node) => {
222.   emit('nodeClick', data)
223. }
225. // 处理删除节点事件
226. const handleDeleteNode = (node, data) => {
227.   emit('deleteNode', { node, data })
228. }
230. // 处理修改节点事件
231. const handleEditNode = (nodeData) => {
232.   emit('editNode', nodeData)
233. }
235. // 处理节点展开
236. const handleNodeExpand = (data, node) => {
237.   expandedKeys.value = handleNodeExpandUtil({
238.     data,
239.     node,
240.     expandedKeys: expandedKeys.value,
241.     onExpand: (data) => emit('nodeExpand', data)
242.   })
243. }
245. // 处理节点收起
246. const handleNodeCollapse = (data, node) => {
247.   expandedKeys.value = handleNodeCollapseUtil({
248.     data,
249.     expandedKeys: expandedKeys.value,
250.     onCollapse: (data) => emit('nodeCollapse', data)
251.   })
252. }
253. </script>
255. <style scoped>
256. .tree-container {
257.   height: 100%;
258.   border: 1px solid #e4e7ed;
259.   padding: 10px;
260.   overflow: auto;
261. }
263. ::v-deep(.tree-node .delete-btn) {
264.   display: none !important;
265. }
267. ::v-deep(.tree-node .edit-btn) {
268.   display: none !important;
269. }
271. ::v-deep(.tree-node:hover) {
272.   color: skyblue;
273. }
275. ::v-deep(.tree-node:hover .delete-btn) {
276.   width: 14px;
277.   display: inline-block !important;
278.   color: red;
279.   margin-left: 5px;
280.   transform: translateY(2px);
281. }
283. ::v-deep(.tree-node:hover .edit-btn) {
284.   width: 14px;
285.   display: inline-block !important;
286.   color: rgb(17, 0, 255);
287.   margin-left: 5px;
288.   transform: translateY(2px);
289. }
291. .tree-header {
292.   border-bottom: 1px solid #e4e7ed;
293.   margin-bottom: 10px;
294. }
295. </style>

复制代码

• treeUtils.js文件
  

1. import { nextTick } from 'vue'
3. /**
4. * 处理树节点展开
5. * @param {Object} options 配置选项
6. * @param {Object} options.data 节点数据
7. * @param {Object} options.node 节点对象
8. * @param {Array} options.expandedKeys 展开节点数组
9. * @param {Function} options.onExpand 展开回调函数
10. * @returns {Array} 更新后的展开节点数组
11. */
12. export const handleNodeExpand = ({
13.     data,
14.     node,
15.     expandedKeys,
16.     onExpand
17. }) => {
18.     // 如果节点ID不在展开数组中，则添加
19.     if (!expandedKeys.includes(data.id)) {
20.         expandedKeys.push(data.id)
21.     }
22.    
23.     // 确保父节点也保持展开状态
24.     let parent = node.parent
25.     while (parent && parent.data && parent.data.id) {
26.         if (!expandedKeys.includes(parent.data.id)) {
27.             expandedKeys.push(parent.data.id)
28.         }
29.         parent = parent.parent
30.     }
31.    
32.     // 调用展开回调
33.     if (onExpand) {
34.         onExpand(data)
35.     }
36.    
37.     return expandedKeys
38. }
40. /**
41. * 处理树节点收起
42. * @param {Object} options 配置选项
43. * @param {Object} options.data 节点数据
44. * @param {Array} options.expandedKeys 展开节点数组
45. * @param {Function} options.onCollapse 收起回调函数
46. * @returns {Array} 更新后的展开节点数组
47. */
48. export const handleNodeCollapse = ({
49.     data,
50.     expandedKeys,
51.     onCollapse
52. }) => {
53.     // 从展开数组中移除节点ID
54.     const index = expandedKeys.indexOf(data.id)
55.     if (index > -1) {
56.         expandedKeys.splice(index, 1)
57.     }
58.    
59.     // 调用收起回调
60.     if (onCollapse) {
61.         onCollapse(data)
62.     }
63.    
64.     return expandedKeys
65. }
67. /**
68. * 处理树节点删除后的展开状态
69. * @param {Object} options 配置选项
70. * @param {Object} options.node 要删除的节点
71. * @param {Object} options.data 节点数据
72. * @param {Array} options.treeData 树数据
73. * @param {Function} options.getExpandedKeys 获取展开节点的方法
74. * @param {Function} options.setExpandedKeys 设置展开节点的方法
75. * @param {Function} options.clearCurrentNode 清除当前选中节点的方法
76. * @returns {Promise<void>}
77. */
78. export const handleTreeDelete = async ({
79.     node,
80.     data,
81.     treeData,
82.     getExpandedKeys,
83.     setExpandedKeys,
84.     clearCurrentNode
85. }) => {
86.     const parent = node.parent
87.     const children = parent.data.children || parent.data
88.     const index = children.findIndex((d) => d.id === data.id)
89.    
90.     // 获取当前展开的节点
91.     const currentExpandedKeys = getExpandedKeys()
92.    
93.     // 删除节点
94.     children.splice(index, 1)
95.    
96.     // 强制刷新treeData
97.     treeData.value = JSON.parse(JSON.stringify(treeData.value))
98.    
99.     // 重新设置展开状态
100.     await nextTick()
101.     // 确保父节点保持展开状态
102.     if (parent && parent.data && parent.data.id) {
103.         if (!currentExpandedKeys.includes(parent.data.id)) {
104.             currentExpandedKeys.push(parent.data.id)
105.         }
106.     }
107.     clearCurrentNode()
108.     setExpandedKeys(currentExpandedKeys)
109.    
110.     return currentExpandedKeys
111. }

复制代码

父组件使用

• 导入组件
  

1. import TreeView from '@/components/basicComponents/TreeView'

复制代码

• 使用组件
  

1. <TreeView
2.         ref="treeViewRef"
3.           :treeData="treeData"
4.           :treeProps="customTreeProps"
5.           :showDelete="true"
6.           :lazy="true"
7.           :default-expanded-keys="expandedKeys"
8.           @nodeClick="handleNodeClick"
9.           @deleteNode="handleNodeDelete"
10.           @loadChildren="handleLoadChildren"
11.           @nodeExpand="handleNodeExpand"
12.           @nodeCollapse="handleNodeCollapse"
13.       />

复制代码

• 父组件里使用方法
  

1. // 定义treeViewRef
2. const treeViewRef = ref(null)
3. const treeData = ref([]) //树数据
4. const expandedKeys = ref([]) // 添加展开节点的key数组
5. // 自定义树形配置
6. const customTreeProps = {
7.   children: 'children',  // 子节点字段名
8.   label: 'label',        // 使用label字段作为显示文本
9.   isLeaf: 'isLeaf'       // 是否为叶子节点字段名
10. }
11. const handleLoadChildren = async ({ node, resolve }) => {
12.     try {
13.         const children = await fetchTreeChildrenData(node.data.id)
14.         resolve(children)
15.     } catch (error) {
16.         console.error('加载子节点失败:', error)
17.         resolve([]) // 加载失败时返回空数组
18.     }
19. }
20. // 获取树子节点数据 懒加载 格式化数据
21. const fetchTreeChildrenData = async (id = '') => {
22.     const { data } = await getZhuangBeiCategory( id )
23.     const formattedChildren = data.map(item => ({
24.       id: item.id,
25.       label: item.label,  // 添加label字段
26.       isLeaf: item.sonNum > 0 ? false : true,  // 修正isLeaf的逻辑
27.       children: [] // 初始化为空数组，等待后续加载
28.     }))
29.     if(id) return formattedChildren
30.     treeData.value = formattedChildren
31. }
32. //删除子节点
33. const handleNodeDelete = ({node, data}) => {
34.     ElMessageBox.confirm(
35.         `<div style="text-align: center;">确定要删除【${data.label}】吗？</div>
36.         '提示',
37.         {
38.             dangerouslyUseHTMLString: true,
39.             confirmButtonText: '确定',
40.             cancelButtonText: '取消',
41.             type: 'warning',
42.         }
43.     ).then(async() => {
44.         try{
45.             await deleteZhuangBeiCategory(data.id)
46.             ElMessage({  type: 'success',  message: '删除成功！'})
47.             await handleTreeDelete({
48.                 node,
49.                 data,
50.                 treeData,
51.                 getExpandedKeys: () => treeViewRef.value.getExpandedKeys(),
52.                 setExpandedKeys: (keys) => treeViewRef.value.setExpandedKeys(keys),
53.                 clearCurrentNode: () => treeViewRef.value.clearCurrentNode()
54.             })
55.         }catch{
56.             ElMessage({  type: 'error',  message: '删除失败！'})
57.         }
58.         
59.         
60.     }).catch(() => {
61.         // 取消了，不做处理
62.     })
63. }
64. // 处理节点展开
65. const handleNodeExpand = (data) => {
66.   if (!expandedKeys.value.includes(data.id)) {
67.     expandedKeys.value.push(data.id)
68.   }
69. }
71. // 处理节点收起
72. const handleNodeCollapse = (data) => {
73.   const index = expandedKeys.value.indexOf(data.id)
74.   if (index > -1) {
75.     expandedKeys.value.splice(index, 1)
76.   }
77. }
79. // 处理节点点击
80. const handleNodeClick = (nodeData) => {
81. }

复制代码

• 其他方法好比复选框，编辑不在示例，感爱好的可以去试试
  

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