vue3 ts element-plus el-tree添加树节点 删除树节点 修改树节点

在Vue 3和Element Plus中使用el-tree组件进行树节点的添加、删除和修改，可以通过操作树的数据来实现。以下是一个简单的示例：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-drop="handleDrop"
    draggable
  >
    <!-- 添加按钮 -->
    <template #default="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button size="mini" @click="append(data)">添加</el-button>
        <el-button size="mini" @click="edit(node, data)">编辑</el-button>
        <el-button size="mini" @click="remove(node, data)">删除</el-button>
      </span>
    </template>
  </el-tree>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import { ElTree } from 'element-plus';
 
interface TreeNode {
  id: number;
  label: string;
  children?: TreeNode[];
}
 
const treeData = ref<TreeNode[]>([
  { id: 1, label: '节点1', children: [] },
  { id: 2, label: '节点2', children: [] },
]);
 
const defaultProps = {
  children: 'children',
  label: 'label',
};
 
// 添加节点
function append(data: TreeNode) {
  const newChild = { id: id++, label: `节点${id}`, children: [] };
  if (!data.children) {
    data.children = [];
  }
  data.children.push(newChild);
}
 
// 编辑节点
function edit(node: ElTree.TreeNode<TreeNode>, data: TreeNode) {
  // 这里可以打开一个对话框进行编辑
  console.log('编辑节点:', data);
}
 
// 删除节点
function remove(node: ElTree.TreeNode<TreeNode>, data: TreeNode) {
  const parent = node.parent;
  const children = parent?.data.children || treeData.value;
  const index = children.findIndex((d) => d.id === data.id);
  if (index !== -1) {
    children.splice(index, 1);
  }
}
 
// 实现拖拽功能
function handleDrop(draggingNode: ElTree.TreeNode<TreeNode>, dropNode: ElTree.TreeNode<TreeNode>, dropType: string, ev: Event) {
  console.log('拖拽操作:', dropNode.data, dropType);
}
 
let id = 3; // 示例中的唯一标识，实际应用中应使用更复杂的方案
</script>

在这个示例中，我们定义了一个TreeNode接口来描述树节点的结构，并使用了ref来创建响应式的树状数据。我们还实现了添加、编辑和删除节点的函数，以及一个处理树节点拖拽的函数handleDrop。在模板中，我们使用了template #default来自定义节点的内容，包括添加、编辑和删除按钮。

注意：这个示例中的添加、编辑和删除操作都是直接修改原始数据。在实际应用中，你可能需要使用状态管理或其他方式来处理这些异步操作。同时，这里的id是为了示例，实际中应该使用唯一的标识符来区分每个节点。