antdv 树节点增删改
时间: 2023-07-15 18:15:32 浏览: 82
Ant Design Vue 的 Tree 组件提供了操作树节点的 API,包括增删改查等常用操作。下面是一些示例代码:
#### 添加节点
```html
<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` 方法更新目标节点的子节点列表。
#### 删除节点
```html
<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` 方法更新父节点的子节点列表。
#### 修改节点
```html
<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` 方法更新它的子节点列表。
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)