以下是 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` 方法中,我们通过打印编辑前和编辑后的节点信息来展示编辑操作。
在实际应用中,我们可以根据具体需求来进行编辑操作,例如更新节点的属性值。