vue实现el-tree操作后默认展开该节点和同级节点拖拽并进行前后端排序

问题一：实现el-tree 删除、添加、编辑后默认展开该节点

操作视频如下

节点代码

<template>
   <el-tree
	   v-loading="loading"
	   ref="tree"
	   element-loading-text="加载中"
	   highlight-current
	   :data="treeData"
	   :props="defaultProps"
	   node-key="id"
	   :default-expanded-keys="defaultKey"
	   @node-click="handleNodeClick"
   />
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13

实现步骤：

1. 通过el-tree的node-click事件获取点击节点的数据
2. 通过递归获取点击节点的所有父级的id
3. 通过node-key和default-expanded-keys属性绑定获取的父级id和自身id

逻辑代码如下

	data() {
		return {
		  treeData:[], // el-tree数据
		  defaultKey:[], // 默认展开的数据
		  defaultProps: {
				children: 'child',
				label: 'name',
		  },
		}
	},
    methods: {
		/**
		 * @func 获取当前点击节点数据，根据当前数据查询该数据的所有父级id
		 * @params {Object} data
		 * @return void
		 */
		async handleNodeClick(data) {
			// 使用递归——编辑、删除、添加完成之后该节点仍是展开状态
			let dataArr = this.findParentIds(this.treeData, data.id);
			this.defaultKey = dataArr;
		},
		/**
		 * 根据树子节点ID查找所有父节点ID
		 * @param {array} dataSource 树形结构数据源
		 * @param {number} nodeId 子节点ID
		 * @returns {array} 包含所有父节点ID的数组，按照从根节点到直接父节点的顺序排序
		 */
		findParentIds(dataSource, nodeId) {
			const parentIds = []; // 用于存储所有父节点ID的数组
			// 定义一个递归函数，用于遍历整棵树并查找子节点的所有父节点
			function traverse(node, nodeId) {
				if (node.id === nodeId) {
					// 如果当前节点的ID等于子节点的ID，则表示已经找到了子节点，可以开始向上查找父节点
					return true; // 返回true表示已经找到了子节点
				}
				if (node.child) {
					// 如果当前节点有子节点，则继续遍历子节点
					for (const childNode of node.child) {
						if (traverse(childNode, nodeId)) {
							// 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
							parentIds.push(node.id);
							return true;
						}
					}
				}
				return false; // 如果当前节点不是子节点的父节点，则返回false
			}
			// 从根节点开始遍历整棵树，并调用递归函数查找子节点的所有父节点
			for (const node of dataSource) {
				if (traverse(node, nodeId)) {
					// 如果在当前节点的子树中找到了子节点的父节点，则直接退出循环
					break;
				}
			}
			return parentIds.length ? [...parentIds, nodeId] : [nodeId]; // 返回所有父节点ID和自身id
		},
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

问题二：el-tree 同级节点拖拽并进行前后端排序+筛选

操作视频如下

节点代码

<template>
   <el-tree
	   v-loading="loading"
	   ref="tree"
	   element-loading-text="加载中"
	   highlight-current
	   :data="treeData"
	   :props="defaultProps"
	   :draggable="true"
	   :allow-drop="allowDrop"
	   :filter-node-method="filterNode"
	   	@node-drop="handleDrop"
   />
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

实现步骤：

1. 通过el-tree的draggable属性开启可拖拽功能
2. 通过el-tree的allow-drop属性写方法判断节点能否被拖拽
3. 通过el-tree的node-drop属性获取拖拽成功节点的子级id
4. 将获取拖拽节点的子集id传给后端
5. 外加筛选是用到了filter-node-method属性

逻辑代码如下

		/**
		 * @func  判断拖拽的数据是否是同一层级
		 */
		allowDrop(draggingNode, dropNode, type) {
			if (draggingNode.level === dropNode.level) {
				if (draggingNode.data.pid === dropNode.data.pid) {
					return type === 'prev' || type === 'next';
				}
			} else {
				return false;
			}
		},
		/**
		 * @func  拖拽成功事件
		 */
		handleDrop(draggingNode, dropNode) {
			let list = [];
			// 获取子级id
			for (let item of dropNode.parent.childNodes) {
				list.push(item.data.id);
			}
			// 将该节点排序后的子级id传给后端
			this.funGetDragSort(list);
		},
		/**
		 * @func  调后端接口——子级id传给后端
		 */
		async funGetDragSort(val) {
			await datamanagement.updateCategorySort(val);
		},
		/**
		 * @func  左侧el-tree控件搜索
		 * @return void
		 */
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38