1、实现需求:每次新增,编辑、删除的时候调用接口,页面不是直接刷新整颗树,而是局部进行刷新展示,
ps:当前树数据为非异步加载,同样适用于异步加载实现效果
1、节点删除
// 删除树节点 参数:tree为树数据,key为要删除的节点key
const deleteTree = (tree: any, key: string) => {
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.key === key) {
tree.splice(i, 1); // 从父节点的children数组中移除节点
treeData.value = [...treeData.value] // 重新渲染
return;
}
if (node.children && node.children.length) {
deleteTree(node.children, key); // 递归遍历子节点
}
}
}
2、新增树节点
// 新增树节点 参数依次为:树数据、新增的节点key、新增的title、父级的key
const addTree = (tree: any, key: string, title: string, fatherkey: string) => {
let newData = { title: title, key: key }
// 新增为根节点,直接push节点
if (fatherkey === '') {
treeData.value.push(newData)
return
}
// 非根节点
for (let i = 0; i < tree.length; i++) {
const node = tree[i]; // 父节点
if (node.key === fatherkey) {
if(node.children){
node.children.push(newData)
}else{
node.children = [newData]
}
// 未展开时自动展开父节点
let currExpand = expandedKeys.value.findIndex(item => item === fatherkey)
if(currExpand === -1){
expandedKeys.value.push(fatherkey)
}
return;
}
if (node.children && node.children.length > 0) {
// fatherNode.value = node
addTree(node.children, key, title, fatherkey); // 递归遍历子节点
}
}
}
3、节点编辑,思路与上面类似,更新节点即可
// 编辑树节点 参数依次为:树数据,编辑节点id,添加的内容,旧的上级id,新的上级id
const editTree = (tree: any, key: string, title: string, oldPid: string, newPid: string) => {
// 修改后上级节点不变
if (oldPid === newPid) {
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.key === key) {
node.title = title; // 更新节点的属性
treeData.value = [...treeData.value]
return;
}
if (node.children && node.children.length > 0) {
editTree(node.children, key, title, oldPid, newPid); // 递归遍历子节点
}
}
} else {
// 修改后上级节点改变,删除旧上级的下的值,添加到新上级节点,
deleteTree(tree, key);
addTree(tree, key, title, newPid)
}
}