uniapp中实现一个tree组件

原本计划通过递归实现，发现在小程序开发者工具中只能展示一级。末了接纳了另外一种思绪。把所有数据全部拍平根据是否有children自动缩进形成层级结果。该组件能实现勾选操作展开折叠的底子交互功能：
结果：

1. <template>
2.   <view class="tree-container">
3.     <view
4.       v-for="(node, index) in flatTreeData"
5.       :key="node.label + index"
6.       :style="{ marginLeft: node.level * 20 + 'px' }"
7.       class="tree-node"
8.     >
9.       <!-- 当前节点 -->
10.       <view class="node-content">
11.         <!-- 展开/收起图标 -->
12.         <image
13.           v-if="node.children && node.children.length > 0"
14.           :src="node.expanded ? expandedIcon : collapsedIcon"
15.           class="expand-icon"
16.           @click.stop="toggleExpand(node)"
17.         />
18.         <!-- 节点名称 -->
19.         <text class="node-label" @click="toggleExpand(node)">{{ node.label }}</text>
20.         <!-- 自定义选择框 -->
21.         <image :src="node.checked ? checkedIcon : uncheckedIcon" class="checkbox-icon" @click="toggleCheck(node)" />
22.       </view>
23.     </view>
24.   </view>
25. </template>
27. <script setup lang="ts">
28. import { ref, computed, watch } from 'vue'
30. // 定义树节点接口
31. interface TreeNode {
32.   label: string
33.   checked?: boolean
34.   expanded?: boolean
35.   children?: TreeNode[]
36.   level?: number // 添加层级信息
37. }
39. // 定义 props
40. const props = defineProps<{
41.   treeList: TreeNode[]
42. }>()
44. // 图标路径
45. const checkedIcon = '/static/checkbox_checked.png' // 选中状态图标
46. const uncheckedIcon = '/static/checkbox_unchecked.png' // 未选中状态图标
47. const expandedIcon = '/static/arr_up.png' // 展开状态图标
48. const collapsedIcon = '/static/arr_down.png' // 收起状态图标
50. // 记录所有勾选的节点
51. const checkedNodes = ref<TreeNode[]>([])
53. // 扁平化树形数据
54. const flatTreeData = computed(() => {
55.   const flatten = (nodes: TreeNode[], level = 0): TreeNode[] => {
56.     let result: TreeNode[] = []
57.     nodes.forEach((node) => {
58.       // 添加层级信息
59.       node.level = level
60.       result.push(node)
61.       // 如果节点展开且有子节点，递归处理子节点
62.       if (node.expanded && node.children) {
63.         result = result.concat(flatten(node.children, level + 1))
64.       }
65.     })
66.     return result
67.   }
68.   let v = flatten(props.treeList)
69.   console.log('v---', v)
70.   return v
71. })
73. // 切换节点选中状态
74. const toggleCheck = (node: TreeNode) => {
75.   // 切换当前节点的选中状态
76.   node.checked = !node.checked
77.   // 如果当前节点是父节点，则勾选所有子节点
78.   if (node.children && node.children.length > 0) {
79.     toggleChildren(node, node.checked)
80.   }
81.   // 更新 checkedNodes
82.   updateCheckedNodes(node)
83. }
85. // 递归切换子节点状态
86. const toggleChildren = (node: TreeNode, checked: boolean) => {
87.   if (node.children) {
88.     node.children.forEach((child) => {
89.       child.checked = checked
90.       toggleChildren(child, checked) // 递归处理子节点
91.     })
92.   }
93. }
95. // 更新 checkedNodes
96. const updateCheckedNodes = (node: TreeNode) => {
97.   if (node.checked) {
98.     checkedNodes.value.push(node)
99.   } else {
100.     checkedNodes.value = checkedNodes.value.filter((n) => n !== node)
101.   }
102.   console.log('当前勾选的节点:', checkedNodes.value)
103. }
105. // 切换节点展开状态
106. const toggleExpand = (node: TreeNode) => {
107.   if (node.children && node.children.length > 0) {
108.     node.expanded = !node.expanded
109.   }
110. }
112. // 递归为所有节点添加 checked 和 expanded 属性
113. const initTreeData = (nodes: TreeNode[]) => {
114.   nodes.forEach((node) => {
115.     node.checked = false // 默认不选中
116.     node.expanded = false // 默认不展开
117.     if (node.children) {
118.       initTreeData(node.children) // 递归处理子节点
119.     }
120.   })
121. }
123. // 监听 treeList 的变化，初始化数据
124. watch(
125.   () => props.treeList,
126.   (newVal) => {
127.     if (newVal && newVal.length > 0) {
128.       initTreeData(newVal) // 初始化 checked 和 expanded 属性
129.     }
130.   },
131.   { immediate: true }
132. )
133. </script>
135. <style scoped>
136. .tree-container {
137.   padding: 20px;
138. }
140. .tree-node {
141.   margin-bottom: 8px;
142. }
144. .node-content {
145.   display: flex;
146.   align-items: center;
147. }
149. .checkbox-icon {
150.   width: 20px;
151.   height: 20px;
152.   margin-right: 8px;
153. }
155. .node-label {
156.   flex: 1;
157. }
159. .expand-icon {
160.   width: 16px;
161.   height: 16px;
162.   margin-left: 8px;
163. }
164. </style>

复制代码

在父组件中使用：

1.   <Tree :treeList="treeList" />
3. const treeList = ref<TreeNode[]>([
4.   {
5.     label: 'Node 1',
6.     checked: false,
7.     expanded: false,
8.     children: [
9.       {
10.         label: 'Node 1.1',
11.         checked: false,
12.         expanded: false,
13.         children: [
14.           {
15.             label: 'Node 1.1.1',
16.             checked: false,
17.             expanded: false,
18.             children: [
19.               {
20.                 label: 'Node 1.1.1.1',
21.                 checked: false,
22.                 expanded: false,
23.                 children: [{ label: 'Node 1.1.1', checked: false }]
24.               }
25.             ]
26.           },
27.           { label: 'Node 1.1.2', checked: false }
28.         ]
29.       },
30.       { label: 'Node 1.2', checked: false }
31.     ]
32.   },
33.   {
34.     label: 'Node 2',
35.     checked: false,
36.     expanded: false,
37.     children: [
38.       { label: 'Node 2.1', checked: false },
39.       { label: 'Node 2.2', checked: false }
40.     ]
41.   }
42. ])

复制代码

注意

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