原数据：
代码语言：javascript复制 1 data: [{
2 id: 1,
3 name: '1',
4 },
5 {
6 id: 2,
7 name: '1-1',
8 parentId: 1
9 },
10 {
11 id: 3,
12 name: '1-1-1',
13 parentId: 2
14 },
15 {
16 id: 4,
17 name: '1-2',
18 parentId: 1
19 },
20 {
21 id: 5,
22 name: '1-2-2',
23 parentId: 4
24 },
25 {
26 id: 6,
27 name: '1-1-1-1',
28 parentId: 3
29 },
30 {
31 id: 7,
32 name: '2',
33 parentId: ''
34 },
35 {
36 id: 8,
37 name: '3'
38 },
39 {
40 id: 9,
41 name: '3-1',
42 parentId: 7
43 }
44 ]转换方法：
代码语言：javascript复制 1 /**
2 * 该方法用于将有父子关系的数组转换成树形结构的数组
3 * 接收一个具有父子关系的数组作为参数
4 * 返回一个树形结构的数组
5 */
6 translateDataToTree(data) {
7 // 没有父节点的数据
8 let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null ||
9 value.parentId ==
10 '')
11 // 有父节点的数据
12 let children = data.filter(value => value.parentId !== 'undefined' && value.parentId !=
13 null || value.parentId !=
14 '')
15 // 定义转换方法的具体实现
16 let translator = (parents, children) => {
17 // 遍历父节点数据
18 parents.forEach((parent) => {
19 // 遍历子节点数据
20 children.forEach((current, index) => {
21 // 此时找到父节点对应的一个子节点
22 if (current.parentId === parent.id) {
23 // 对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
24 let temp = JSON.parse(JSON.stringify(children))
25 // 让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
26 temp.splice(index, 1)
27 // 让当前子节点作为唯一的父节点，去递归查找其对应的子节点
28 translator([current], temp)
29 // 把找到子节点放入父节点的children属性中
30 typeof parent.children !== 'undefined' ? parent.children
31 .push(
32 current) :
33 parent.children = [current]
34 }
35 })
36 })
37 }
38 // 调用转换方法
39 translator(parents, children)
40 // 返回最终的结果
41 return parents;
42 }
