【vue】el-tree的新增/编辑/删除节点

在Vue中使用el-tree组件进行新增、编辑和删除节点，通常需要与后端的API进行交互。以下是一个简化的例子，展示了如何在Vue组件中实现这些功能。

<template>
  <div>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
    >
      <span slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => append(data)">新增</el-button>
          <el-button type="text" size="mini" @click="() => edit(node, data)">编辑</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [/* 初始化树形数据 */],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentNode: null
    };
  },
  methods: {
    handleNodeClick(data, node) {
      this.currentNode = node;
    },
    append(data) {
      const newChild = { id: id++, label: `new child ${id}`, children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },
    edit(node, data) {
      // 编辑逻辑，例如弹出对话框让用户输入新的节点信息
      // 然后更新data的相关属性
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    }
  }
};
</script>

在这个例子中，el-tree组件用于展示树形结构数据，每个节点后面有新增、编辑和删除按钮。点击新增按钮会添加一个新的子节点，编辑按钮会弹出对话框让用户编辑节点信息，删除按钮则会从树形数据中移除对应节点。

注意：实际应用中，新增、编辑和删除操作可能需要与后端API进行交互，这时应调用后端API来实现数据的持久化。