关于el-tree节点的增删改

<template>
  <div>
    <el-tree :data="treeData" :props="treeProps" :default-expand-all="true" :render-content="renderContent"
      default-expand-all></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: "Node 1",
          children: [
            {
              id: 2,
              label: "Node 1-1",
            },
            {
              id: 3,
              label: "Node 1-2",
            },
          ],
        },
        {
          id: 4,
          label: "Node 2",
        },
      ],
      list: [
        {
          id: 1,
          parentId: 0,
          typeName: '哈哈哈',
          time: 12,
        },
        {
          id: 2,
          parentId: 1,
          typeName: '23323',
          time: 12,
        },
        {
          id: 3,
          parentId: 2,
          typeName: '23323',
          time: 12,
        }
      ],
      treeProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    const a = this.buildTree(this.list)
    console.log("list", a);
  },

  methods: {
    //二维数组转成树
    buildTree(list) {
      let result = [];
      let map = {};

      // 先将列表转化为对象，方便后续查找  
      for (let item of list) {
        map[item.id] = { ...item, children: [] }
      }

      for (let item of list) {
        let parent = map[item.parentId];
        if (parent) {
          // 如果找到了父级，就将当前项添加到父级的 children 中  
          parent.children.push(map[item.id]);
        } else {
          // 如果没有找到父级，就将当前项添加到结果数组中  
          result.push(map[item.id]);
        }
      }

      return result;
    },
    renderContent(h, { node, data }) {
      return (
        <span class="ustom-nodce">
          {node.label}
          <span class="node-actions">
            <el-button
              type="text"
              icon="el-icon-plus"
              onClick={() => this.addNode(data)}
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              onClick={() => this.editNode(data)}
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              onClick={() => this.deleteNode(data)}
            ></el-button>
          </span>
        </span>
      );
    },
    addNode(nodeData) {
      console.log("nodeData=========>", nodeData);
      const newNode = {
        id: Date.now(),
        label: "New Node",
      };
      if (!nodeData.children) {
        this.$set(nodeData, "children", []);
      }
      nodeData.children.push(newNode);
    },
    editNode(nodeData) {
      this.$prompt("Enter new label", "Edit Node", {
        inputValue: nodeData.label,
        confirmButtonText: "Save",
        cancelButtonText: "Cancel",
      })
        .then(({ value }) => {
          nodeData.label = value;
        })
        .catch(() => { });
    },
    deleteNode(nodeData) {
      this.$confirm("Are you sure to delete this node?", "Delete Node", {
        confirmButtonText: "Delete",
        cancelButtonText: "Cancel",
        type: "warning",
      })
        .then(() => {
          const parent = this.findParent(this.treeData, nodeData.id);
          parent.children = parent.children.filter(
            (child) => child.id !== nodeData.id
          );
        })
        .catch(() => { });
    },
    findParent(tree, nodeId) {
      for (let node of tree) {
        if (node.children) {
          if (node.children.some((child) => child.id === nodeId)) {
            return node;
          } else {
            const parent = this.findParent(node.children, nodeId);
            if (parent) {
              return parent;
            }
          }
        }
      }
      return null;
    },
  },
};
</script>

<style scoped>
.custom-node {
  display: flex;
  align-items: center;
}

.node-actions {
  margin-left: auto;
}
</style>