Ant-design-vue系列： 树形控件 a-tree 的新增、删除、编辑节点

以下是 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` 方法中，我们通过打印编辑前和编辑后的节点信息来展示编辑操作。

在实际应用中，我们可以根据具体需求来进行编辑操作，例如更新节点的属性值。