经过几次优化，已经达到了我所能达到的最优解，特写出代码优化的过程，记录自己的成长，想复制代码的直接跳转文末,本方法在循环过程中添加了索引，不需要的可自行删除
- 例如：
1.-----
1-1.-----
1-2.---
2.---
2-1.---
2-1-1---
2-1-2---
2-1-3---
2-2.---
2-2-1---
路漫漫其修远兮，吾将上下而求索。
树中循环是避免不了的，只能尽量减少少循环，代码仅供交流，并不是最优解
- 方法是用vue实现的，element-ui的Tree树形组件有bug，会导致click事件丢失，从而无法添加数据
- 本代码实现了增删的方法，修改也是拿到index，通过index去修改list中的数据
- 索引没什么用，使用只会影响性能，但是没有办法，产品设计这样，只能单独递归渲染
- 优化项很多，比如将计算索引的方法提取出来，在添加和删除阶段计算好，删除的时候通过父级只重新计算兄弟级的索引，这样可以节省性能
- 我这里是只要发生变化，就会重新计算整个树的数据
- 因为删除的时候只是删除了父级，所以会有脏数据，但是树的数据是干净的，提交到服务器的时候需要将树重新转换为1维数组
- id是数据库的默认主键字段，在这里却是非常重要的父子级依赖关系，如果和服务端冲突需要替换为其他字段
- 实际开发中这个逻辑由服务端实现比较好，但如果服务端不想写，那只能由前端完成
- 数据格式应由服务端规定，免得生成的数据无法使用
- 最好的结果就是每次增删改查一条数据都调用服务端接口
- 前端实现时为了避免新增了半天的数据因为不小心刷新页面而丢失，可使用localStorange，在提交之后再将数据清除
下面HTML是示例代码，可将其中arrToTree方法替换，可以在浏览器直接打开运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.lh {
line-height: 200px;
}
</style>
</head>
<body>
<div id="app">
{{ message }}
<p>use scoped slot</p>
<el-button type="text" size="mini" @click="add">add</el-button>
<el-tree
:data="tree"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
>
<span class="custom-tree-node lh" slot-scope="{ node, data }">
<span class="lh">{{ node.label }}</span>
<span class="lh">
<el-button type="text" size="mini" @click="()=>append(data)">
Append
</el-button>
<el-button type="text" size="mini" @click="()=>edit(data)">
edit
</el-button>
<el-button type="text" size="mini" @click="remove(node, data)">
Delete
</el-button>
</span>
</span>
</el-tree>
<el-table
:data="tree"
style="width: 100%; margin-bottom: 20px"
row-key="id"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="date" label="日期" sortable width="180">
</el-table-column>
<el-table-column prop="label" label="姓名" sortable width="180">
</el-table-column>
<el-table-column prop="number" label="地址"> </el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="append(scope.row)" type="text" size="small"
>append</el-button
>
<el-button @click="remove(scope.row)" type="text" size="small">remove</el-button>
</template>
</el-table-column>
</el-table>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
list: [],
defaultProps: {
children: "children",
label: "label",
},
},
computed: {
tree() {
let tree = this.arrToTree(this.list);
console.log(tree);
return tree;
},
},
methods: {
setChildrenIndex(params) {
if (params.children && params.children.length) {
params.children.forEach((item, index) => {
item.number = params.number + "-" + (index + 1);
item.label=item.label+item.number
this.setChildrenIndex(item);
return item;
});
}
return params;
},
arrToTree(arr) {
console.log("arr", arr);
arr = JSON.parse(JSON.stringify(arr));
let level = [];
let count = 0;
while (true) {
console.log(count);
let a = [];
if (!level.length) {
a = arr.filter((item) => 0 == item.pid);
a = a.map((item, index) => {
item.number = "" + (index + 1);
item.label = item.label + item.number;
return item;
});
} else {
a = arr.filter((item) => {
let arrs = level[count];
let c = arrs.find((ite) => {
return Boolean(ite.id == item.pid);
});
return !!c;
});
count++;
}
if (a.length > 0) {
level.push(a);
} else {
break;
}
}
// 反向循环挂载树
let menu = [];
for (let i = level.length - 1; i >= 0; i--) {
if (level[i - 1]) {
menu = level[i - 1].map((item) => {
item.children = level[i].filter((ite) => ite.pid == item.id);
return item;
});
} else {
menu = level[0];
break;
}
}
// 正向循环渲染number 递归重新计算number
menu = menu.map(item=>this.setChildrenIndex(item));
return menu;
},
add() {
let id = 1;
if (this.list.length) {
id = this.list[this.list.length - 1].id + 1;
}
this.list.push({ id, label: "张三", pid: 0 });
},
append(data) {
let pid = data.id;
let id = this.list[this.list.length - 1].id + 1;
let item = { id, label: "张三", pid };
console.log(item);
this.list.push(item);
},
edit() {},
remove(data) {
let index = this.list.findIndex(item=>item.id==data.id)
this.list.splice(index,1)
},
},
});
</script>
</body>
</html>
二次优化
- 优化思路，既然递归可以将索引循环出来，那么就可以将遍历子级的代码放在递归中实现，代码如下：
- 去掉之前冗余的写法，将arrToTree方法改造一下
- 既然map循环中只用到了第一层，那么只需要将第一层父级过滤出来即可
- 最后将查找子级的方法放在递归方法中
// 改造后的 arrToTree方法
arrToTree(arr) {
// 克隆数组避免引用引起原数组变化
arr = JSON.parse(JSON.stringify(arr));
// 去掉之前冗余的写法，将第一层父级过滤出来
const menu = arr.filter((item) => item.pid == 0);
// 正向循环渲染number 递归重新计算number
return menu.map((item,index) => {
item.number=`${index+1}`
item.label = item.label+item.number
return this.setChildrenIndex(item)
});
},
// 改造后的 setChildrenIndex方法
setChildrenIndex(params) {
// 添加了寻找子级的方法
let list = arr = JSON.parse(JSON.stringify(this.list));
params.children = arr.filter((item) => item.pid == params.id);
if (params.children && params.children.length) {
params.children.forEach((item, index) => {
item.number = params.number + "-" + (index + 1);
item.label = item.label + item.number;
this.setChildrenIndex(item);
return item;
});
}
return params;
},
三次优化
- 优化思路，既然递归可以实现将一维数组转树的需求，那么只需要将arrToTree和setChildrenIndex的方法合并成一个方法即可
- 为了寻找它的子级，我们需要知道最先开始的父级id，所以递归方法中需要多一个参数pid
- 添加索引参数，方便子级拼接
arrToTree(list, pid = 0, str = "") {
// 克隆数组避免引用引起原数组变化
if (!pid) list = JSON.parse(JSON.stringify(list));
let result = list.filter((item) => item.pid == pid);
return result.map((item,index) => {
item.number = `${str ? str + "-" : str}${index + 1}`;
item.label = item.label + item.number
item.children = this.arrToTree(list, item.id, item.number);
return item
});
},
其他解法
- 朋友写的，一维数组转树
function disposeTree(data = [], id = "id", pid = "pid", childKey = "children") {
data = [...data];
//父节点映射
let nodesMap = {};
// 找出所有的根节点
let rootNodes = data.filter((item) => {
let parentId = item[pid];
if (parentId) {
nodesMap[parentId] = (nodesMap[parentId] || []).concat(item);
return false;
}
return true;
});
console.log(rootNodes);
console.log(nodesMap);
// 找出根节点下面所有的子节点
const compose = (list) => {
return list.map((item) => {
let children = nodesMap[item[id]];
return children
? {
...item,
[childKey]: compose(children),
}
: item;
});
};
return compose(rootNodes);
}
- 朋友写的，树形数据展开
/**
* 树转数组
*/
export function flatTree(dataSource, childKey = 'children'){
let results = [];
const flat = (data) => {
data = data || []; //对特殊值null,undefined处理
data.forEach(item => {
let children = item[childKey];
delete item[childKey];
results.push(item);
flat(children)
});
}
flat(dataSource);
return results;
}
优秀的程序员不在于他写了多少行代码，而在于用简单的方式去解决问题，编程是一种艺术，好的代码根据优化和重构，可以将复杂的问题简单化
