Bootstrap

基于ant-design-vue 3.x版本,a-tree的编辑、修改以及删除

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)
      }
    }

;