在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是为了示例，实际中应该使用唯一的标识符来区分每个节点。