以下是 Ant-design-vue 树形控件 a-tree 的新增、删除、编辑节点示例：
新增节点
<template> <a-tree :tree-data="treeData" @create="handleCreate"></a-tree> </template> <script> export default { data() { return { treeData: [ { title: 'Node 1', key: '0-0', children: [ { title: 'Node 1-1', key: '0-0-0' }, { title: 'Node 1-2', key: '0-0-1' } ] }, { title: 'Node 2', key: '0-1' } ] }; }, methods: { handleCreate(treeNode, { add }) { // 创建新节点 const newNode = { title: 'New Node', key: '0-2' }; add(treeNode, newNode); } } }; </script>
在上面的示例中，我们在 a-tree 组件中使用 @create 事件来监听节点创建事件。
在 handleCreate 方法中，我们通过 add 函数来将新节点插入到当前节点的子节点列表中。
删除节点
<template> <a-tree :tree-data="treeData" @remove="handleRemove"></a-tree> </template> <script> export default { data() { return { treeData: [ { title: 'Node 1', key: '0-0', children: [ { title: 'Node 1-1', key: '0-0-0' }, { title: 'Node 1-2', key: '0-0-1' } ] }, { title: 'Node 2', key: '0-1' } ] }; }, methods: { handleRemove(treeNode) { // 删除节点 const parent = treeNode.parent; parent.children.splice(parent.children.indexOf(treeNode), 1); } } }; </script>
在上面的示例中，我们在 a-tree 组件中使用 @remove 事件来监听节点删除事件。
在 handleRemove 方法中，我们通过 splice 函数将当前节点的父节点中的子节点列表删除当前节点。
编辑节点
<template> <a-tree :tree-data="treeData" @edit="handleEdit"></a-tree> </template> <script> export default { data() { return { treeData: [ { title: 'Node 1', key: '0-0', children: [ { title: 'Node 1-1', key: '0-0-0' }, { title: 'Node 1-2', key: '0-0-1' } ] }, { title: 'Node 2', key: '0-1' } ] }; }, methods: { handleEdit(treeNode) { // 编辑节点 console.log(treeNode); // 打印编辑前的节点信息 // 进行编辑操作，例如更新节点的 title 属性值 treeNode.title = 'New Title'; console.log(treeNode); // 打印编辑后的节点信息 } } }; </script>
id="code">在上面的示例中，我们在 a-tree 组件中使用 `@edit` 事件来监听节点编辑事件。在 `handleEdit` 方法中，我们通过打印编辑前和编辑后的节点信息来展示编辑操作。
在实际应用中，我们可以根据具体需求来进行编辑操作，例如更新节点的属性值。
