antdv 树节点增删改

Ant Design Vue 的 Tree 组件提供了操作树节点的 API，包括增删改查等常用操作。下面是一些示例代码：

#### 添加节点

<template>
  <a-tree :tree-data="treeData" :expanded-keys="expandedKeys" :selected-keys="selectedKeys" @select="onSelect">
    <template #title="{ key, title }">
      <span>{{ title }}</span>
      <a-button type="primary" size="small" @click="addNode(key)">添加</a-button>
    </template>
  </a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Parent 1',
          key: '0-0',
          children: [
            {
              title: 'Child 1',
              key: '0-0-0'
            },
            {
              title: 'Child 2',
              key: '0-0-1'
            }
          ]
        }
      ],
      expandedKeys: ['0-0'],
      selectedKeys: []
    };
  },
  methods: {
    addNode(key) {
      const node = {
        title: 'New Node',
        key: `${key}-0`,
        children: []
      };
      const targetNode = this.$refs.tree.getNode(key);
      targetNode.data.children.push(node);
      this.$refs.tree.updateKeyChildren(targetNode.key, targetNode.data.children);
    },
    onSelect(selectedKeys, event) {
      this.selectedKeys = selectedKeys;
    }
  }
};
</script>

在这个示例中，我们使用了 Tree 组件的 `tree-data` 属性来指定树的数据源，使用 `expanded-keys` 和 `selected-keys` 属性来指定展开和选中的节点。在节点的标题模板中，我们使用了 `@click` 事件来绑定添加节点的方法 `addNode`。在这个方法中，我们首先创建一个新节点对象，然后找到目标节点并将新节点添加到它的子节点中，最后使用 `updateKeyChildren` 方法更新目标节点的子节点列表。

#### 删除节点

<template>
  <a-tree :tree-data="treeData" :expanded-keys="expandedKeys" :selected-keys="selectedKeys" @select="onSelect">
    <template #title="{ key, title }">
      <span>{{ title }}</span>
      <a-button type="primary" size="small" @click="addNode(key)">添加</a-button>
      <a-button type="danger" size="small" @click="deleteNode(key)">删除</a-button>
    </template>
  </a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Parent 1',
          key: '0-0',
          children: [
            {
              title: 'Child 1',
              key: '0-0-0'
            },
            {
              title: 'Child 2',
              key: '0-0-1'
            }
          ]
        }
      ],
      expandedKeys: ['0-0'],
      selectedKeys: []
    };
  },
  methods: {
    addNode(key) {
      // ...
    },
    deleteNode(key) {
      const targetNode = this.$refs.tree.getNode(key);
      const parentKey = targetNode.parent.key;
      const index = targetNode.index;
      targetNode.parent.data.children.splice(index, 1);
      this.$refs.tree.updateKeyChildren(parentKey, targetNode.parent.data.children);
    },
    onSelect(selectedKeys, event) {
      this.selectedKeys = selectedKeys;
    }
  }
};
</script>

在这个示例中，我们在节点的标题模板中添加了一个删除按钮，并绑定了 `deleteNode` 方法。在这个方法中，我们首先找到目标节点和它的父节点，然后使用 `splice` 方法从父节点的子节点列表中删除目标节点，最后使用 `updateKeyChildren` 方法更新父节点的子节点列表。

#### 修改节点

<template>
  <a-tree :tree-data="treeData" :expanded-keys="expandedKeys" :selected-keys="selectedKeys" @select="onSelect">
    <template #title="{ key, title }">
      <span>{{ title }}</span>
      <a-button type="primary" size="small" @click="addNode(key)">添加</a-button>
      <a-button type="danger" size="small" @click="deleteNode(key)">删除</a-button>
      <a-button size="small" @click="editNode(key, title)">编辑</a-button>
    </template>
  </a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Parent 1',
          key: '0-0',
          children: [
            {
              title: 'Child 1',
              key: '0-0-0'
            },
            {
              title: 'Child 2',
              key: '0-0-1'
            }
          ]
        }
      ],
      expandedKeys: ['0-0'],
      selectedKeys: []
    };
  },
  methods: {
    addNode(key) {
      // ...
    },
    deleteNode(key) {
      // ...
    },
    editNode(key, title) {
      const targetNode = this.$refs.tree.getNode(key);
      this.$prompt('请输入节点名称', '修改节点', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: title
      })
        .then(({ value }) => {
          targetNode.data.title = value;
          this.$refs.tree.updateKeyChildren(targetNode.key, targetNode.data.children);
        })
        .catch(() => {});
    },
    onSelect(selectedKeys, event) {
      this.selectedKeys = selectedKeys;
    }
  }
};
</script>

在这个示例中，我们在节点的标题模板中添加了一个编辑按钮，并绑定了 `editNode` 方法。在这个方法中，我们使用 `this.$prompt` 方法弹出一个对话框，让用户输入新的节点名称。在对话框确认后，我们找到目标节点并修改它的标题，然后使用 `updateKeyChildren` 方法更新它的子节点列表。