devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Naive UI 获取树tree完整选中树结构（通用方法，也适用于其他自定义组件）_navie ui树形结构

作者：不正经 | 2024-05-03 22:32:36

赞

踩

navie ui树形结构

截止文章记录前，Naive UI 并未提供直接获取，与选中叶子节点相关的完整树结构数据方法，记录一下前端实现方法。

数据准备：

数据准备：树结构初始数据，选中相关的数据

  1. // 初始树结构数据
  2. let dataSetData = [
  3. 	{
  4. 		id: '1',
  5. 		text: '节点1',
  6. 		nodeuuid: '1',
  7. 		pnodeId: null,
  8. 		children: []
  9. 	},
  10. 	{
  11. 		id: '2',
  12. 		text: '节点2',
  13. 		nodeuuid: '2',
  14. 		pnodeId: null,
  15. 		children: [
  16. 			{
  17. 				id: '2-1',
  18. 				text: '节点2-1',
  19. 				nodeuuid: '2-1',
  20. 				pnodeId: '2',
  21. 				children: []
  22. 			},
  23. 			{
  24. 				id: '2-2',
  25. 				text: '节点2-2',
  26. 				nodeuuid: '2-2',
  27. 				pnodeId: '2',
  28. 				children: [
  29. 					{
  30. 						id: '2-2-1',
  31. 						text: '节点2-2-1',
  32. 						nodeuuid: '2-2-1',
  33. 						pnodeId: '2-2',
  34. 						children: []
  35. 					}
  36. 				]
  37. 			},
  38. 			{
  39. 				id: '2-3',
  40. 				text: '节点2-3',
  41. 				nodeuuid: '2-3',
  42. 				pnodeId: '2',
  43. 				children: []
  44. 			}
  45. 		]
  46. 	},
  47. 	{
  48. 		id: '3',
  49. 		text: '节点3',
  50. 		nodeuuid: '3',
  51. 		pnodeId: null,
  52. 		children: []
  53. 	},
  54. 	{
  55. 		id: '4',
  56. 		text: '节点4',
  57. 		nodeuuid: '4',
  58. 		pnodeId: null,
  59. 		children: []
  60. 	},
  61. 	{
  62. 		id: '5',
  63. 		text: '节点5',
  64. 		nodeuuid: '5',
  65. 		pnodeId: null,
  66. 		children: [
  67. 			{
  68. 				id: '5-1',
  69. 				text: '节点5-1',
  70. 				nodeuuid: '5-1',
  71. 				pnodeId: '5',
  72. 				children: []
  73. 			},
  74. 			{
  75. 				id: '5-2',
  76. 				text: '节点5-2',
  77. 				nodeuuid: '5-2',
  78. 				pnodeId: '5',
  79. 				children: []
  80. 			}
  81. 		]
  82. 	}
  83. ]
  84.  
  85. // 选中相关的数据
  86. let datasetCheckedNodes = [
  87. 	{
  88. 		id: '2',
  89. 		text: '节点2',
  90. 		nodeuuid: '2',
  91. 		pnodeId: null,
  92. 		children: [
  93. 			{
  94. 				id: '2-1',
  95. 				text: '节点2-1',
  96. 				nodeuuid: '2-1',
  97. 				pnodeId: '2',
  98. 				children: []
  99. 			},
  100. 			{
  101. 				id: '2-2',
  102. 				text: '节点2-2',
  103. 				nodeuuid: '2-2',
  104. 				pnodeId: '2',
  105. 				children: [
  106. 					{
  107. 						id: '2-2-1',
  108. 						text: '节点2-2-1',
  109. 						nodeuuid: '2-2-1',
  110. 						pnodeId: '2-2',
  111. 						children: []
  112. 					}
  113. 				]
  114. 			},
  115. 			{
  116. 				id: '2-3',
  117. 				text: '节点2-3',
  118. 				nodeuuid: '2-3',
  119. 				pnodeId: '2',
  120. 				children: []
  121. 			}
  122. 		]
  123. 	},
  124. 	{
  125. 		id: '2-3',
  126. 		text: '节点2-3',
  127. 		nodeuuid: '2-3',
  128. 		pnodeId: '2',
  129. 		children: []
  130. 	},
  131. 	{
  132. 		id: '2-2',
  133. 		text: '节点2-2',
  134. 		nodeuuid: '2-2',
  135. 		pnodeId: '2',
  136. 		children: [
  137. 			{
  138. 				id: '2-2-1',
  139. 				text: '节点2-2-1',
  140. 				nodeuuid: '2-2-1',
  141. 				pnodeId: '2-2',
  142. 				children: []
  143. 			}
  144. 		]
  145. 	},
  146. 	{
  147. 		id: '2-2-1',
  148. 		text: '节点2-2-1',
  149. 		nodeuuid: '2-2-1',
  150. 		pnodeId: '2-2',
  151. 		children: []
  152. 	},
  153. 	{
  154. 		id: '4',
  155. 		text: '节点4',
  156. 		nodeuuid: '4',
  157. 		pnodeId: null,
  158. 		children: []
  159. 	},
  160. 	{
  161. 		id: '5-2',
  162. 		text: '节点5-2',
  163. 		nodeuuid: '5-2',
  164. 		pnodeId: '5',
  165. 		children: []
  166. 	}
  167. ]

 实现步骤，一共四步，如下： 

  1. // 0.设置每个节点唯一标识nodeuuid，相关父节点标识pnodeId（若初始树结构数据每个节点已有唯一标识，相关父节点标识，可跳过该步骤）
  2. // dataSetData = addParentData(res, null)
  3. // 1.设置相关树节点映射
  4. const treeMap = setMap()
  5. // 2.获取所有选中的叶子节点（目的是为了获取所有选中的叶子节点，可使用其他方法获得）
  6. const leafNodes = datasetCheckedNodes.filter(v => v && (!v.children || v.children.length == 0))
  7. // 3.获取所有和子节点相关，被勾选的根父节点集合（包含已勾选和未勾选数据，通过是否勾选标识区分）
  8. const rootNodes = getAllCheckedRootNodes(leafNodes, treeMap)
  9. // 4.删除未选中标识数据，获取重组后的完整树结构数据
  10. const treeData = getCheckedTree(rootNodes, leafNodes)
  11.  
  12. console.log('重组后的完整树结构数据', treeData)

实现函数方法如下： 

  1. /**
  2.  * 递归遍历赋值当前节点的父节点，设置每个节点唯一标识nodeuuid，相关父节点标识pnodeId
  3.  * @param treeData 初始树结构数据
  4.  * @param pnodeId 父节点Id
  5.  * @returns treeData 处理后的树结构数据
  6.  */
  7. function addParentData(treeData, pnodeId) {
  8. 	for (var i in treeData) {
  9. 		treeData[i].scopedSlots = {
  10. 			title: 'custom'
  11. 		}
  12. 		treeData[i].nodeuuid = uuidv4()
  13. 		treeData[i].text = treeData[i].text ? treeData[i].text : treeData[i].name
  14. 		treeData[i].pnodeId = pnodeId
  15.  
  16. 		if (treeData[i].children && treeData[i].children.length) {
  17. 			addParentData(treeData[i].children, treeData[i].nodeuuid)
  18. 		}
  19. 	}
  20. 	return treeData
  21. }
  22.  
  23. /**
  24.  * 设置相关树节点映射
  25.  * 两种方式：
  26.  * 其一，树组件有提供快捷获取选中和半选数据的方法，可直接调用方法，组装treeMap（推荐）
  27.  * 其二，树组件没有提供快捷获取选中和半选数据的方法，则递归所有初始树结构数据，组装treeMap（较消耗内存，慎用）
  28.  * @returns treeMap  树节点映射
  29.  */
  30. function setMap() {
  31. 	let treeMap = {} // 树节点映射
  32. 	// ----------------方法一（推荐）-------------------
  33. 	// 获取选中的数据
  34. 	// const checkedNodes = TreeRef.value.getCheckedData()
  35. 	// // 获取半选的数据
  36. 	// const indeterminateNodes = TreeRef.value.getIndeterminateData()
  37.  
  38. 	// checkedNodes.options.forEach(node => {
  39. 	// 	if (node) {
  40. 	// 		treeMap[node.nodeuuid] = node
  41. 	// 	}
  42. 	// })
  43. 	// indeterminateNodes.options.forEach(node => {
  44. 	// 	if (node) {
  45. 	// 		treeMap[node.nodeuuid] = node
  46. 	// 	}
  47. 	// })
  48.  
  49. 	// ------------------方法二（较消耗内存，慎用）-------------------
  50. 	treeMap = setMap2(dataSetData, treeMap)
  51.  
  52. 	return treeMap
  53. }
  54.  
  55. /**
  56.  * 递归所有初始树结构数据，组装treeMap
  57.  * @param {*} tree 初始树结构数据
  58.  * @param {*} map 
  59.  * @returns 
  60.  */
  61. function setMap2(tree, map) {
  62. 	tree.forEach(node => {
  63. 		map[node.nodeuuid] = node
  64. 		if (node.children && node.children.length > 0) {
  65. 			setMap2(node.children, map)
  66. 		}
  67. 	})
  68.  
  69. 	return map
  70. }
  71.  
  72. /**
  73.  * 获取所有和子节点相关，被勾选的根父节点集合（包含已勾选和未勾选数据，通过是否勾选标识区分）
  74.  * @param leafCheckedNodes 所有选中的叶子节点
  75.  * @param treeMap 相关树节点映射（勾选与半勾选）
  76.  * @returns rootNodes  和子节点相关，被勾选的根父节点集合
  77.  */
  78. function getAllCheckedRootNodes(leafCheckedNodes, treeMap) {
  79. 	let rootNodes = []
  80. 	leafCheckedNodes.forEach(node => {
  81. 		// 找到叶子结点的父节点
  82. 		let pNode = treeMap[node.pnodeId]
  83. 		// 迭代
  84. 		while (pNode) {
  85. 			// 添加已勾选的标志
  86. 			pNode.isChecked = true
  87. 			node = pNode
  88. 			pNode = treeMap[node.pnodeId]
  89. 		}
  90. 		// 如果pNode不存在，说明node是根节点
  91. 		if (!rootNodes.some(i => i.nodeuuid == node.nodeuuid)) {
  92. 			rootNodes.push(node)
  93. 		}
  94. 	})
  95. 	return rootNodes
  96. }
  97.   
  98. /**
  99.  * 删除未选中标识数据，递归获取重组后的完整树结构数据
  100.  * @param rootNodes 跟勾选相关的根节点集合
  101.  * @param checkedLeafNodes 所有选中的叶子节点
  102.  * @returns 
  103.  */
  104. function getCheckedTree(rootNodes, checkedLeafNodes) {
  105. 	// 倒序，避免for循环中使用splice后导致index错乱
  106. 	for (let i = rootNodes.length - 1; i >= 0; i--) {
  107. 		const node = rootNodes[i]
  108. 		// 不是叶子节点
  109. 		if (node.children && node.children.length > 0) {
  110. 			// 检查勾选标志位,true，那么递归,false，那么删除
  111. 			if (node.isChecked) {
  112. 				getCheckedTree(node.children, checkedLeafNodes)
  113. 			} else {
  114. 				rootNodes.splice(i, 1)
  115. 			}
  116. 		} else {
  117. 			// 如果是叶子节点，那么检查其是否是勾选节点，是，保留，不是删除
  118. 			const flag = checkedLeafNodes.some(n => n.nodeuuid == node.nodeuuid)
  119. 			if (!flag) {
  120. 				rootNodes.splice(i, 1)
  121. 			}
  122. 		}
  123. 	}
  124. 	return rootNodes
  125. }

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号