Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
ant框架里，tree结构的剖析
承接上文
问题：ant的异步树形结构，当渲染下级结构完成后，再次在主干新建一个新的下级结构时，不会实时渲染出新增加的那条下级结构，必须刷新整个页面，重新后端请求数据，并进行渲染，这是一个不好的体验
3.根据ant的tree结构，自定义实时渲染tree结构页面
思路：使用递归模式
// 实时显示下级页面的变化实例
// 封装函数：新增下级结构
/*
tree为当前已经被渲染出来的所有tree结构（根据ant框架自带的onLoadData方法实时获取）
id为新增的treeChildren的上级id属性（根据ant框架自带的onSelect方法的参数info获取）
addData为新增的treeChildren的属性（根据新增时填写的form表单获取）
*/
const add = (tree = [], id = '', addData = {}) => {
tree.forEach((item, index) => {
if (item.id === id) {
const children = tree[index].children || []
children.push(addData)
} else {
add(item.children, id, addData)
}
})
}
// 封装函数：修改下级结构
/*
tree为当前已经被渲染出来的所有tree结构（根据ant框架自带的onLoadData方法实时获取）
id为修改的treeChildren的id属性（根据ant框架自带的onSelect方法的参数info获取）
editData为修改的treeChildren的属性（根据修改时填写的form表单获取）
*/
const edit = (tree = [], id = '', editData = {}) => {
tree.forEach((item, index) => {
if (item.id === id) {
tree[index] = {...item, ...editData}
} else {
edit(item.children, id, editData)
}
})
}
// 封装函数：删除下级结构
/*
tree为当前已经被渲染出来的所有tree结构（根据ant框架自带的onLoadData方法实时获取）
id为新增的treeChildren的id属性（根据ant框架自带的onSelect方法的参数info获取）
*/
const del = (tree = [], id = '') => {
tree.forEach((item, index) => {
if (item.id === id) {
tree.splice(index, 1);
} else {
del(item.children, id);
}
})
}
