vue得antd得树状图怎么在每行后面加编辑删除图标
时间: 2024-01-13 15:33:50 浏览: 142
vue树, vue-tree,vue写的树形结构,包括删除,全选
3星 · 编辑精心推荐
要在每行后面添加编辑和删除图标,可以借助`a-tree`组件和自定义的`slot`来实现。以下是一个示例代码:
```vue
<a-tree :treeData="treeData">
<template #title="{ key, title }">
<span>{{ title }}</span>
<a-icon type="edit" style="margin-left: 8px" @click="handleEdit(key)" />
<a-icon type="delete" style="margin-left: 8px" @click="handleDelete(key)" />
</template>
</a-tree>
```
在上述代码中,我们利用了`a-tree`组件的`slot`功能,通过`#title`指令来自定义每个节点的标题部分。在标题部分,我们首先展示了节点的标题内容,然后添加了一个编辑图标和一个删除图标。点击这两个图标时,会调用相应的方法(例如`handleEdit`和`handleDelete`)进行相关操作。
这样,每个节点的标题部分就会显示标题文本以及编辑和删除图标。
注意:上述示例代码中使用了Ant Design Vue的图标组件`a-icon`,你需要确保已经正确引入该组件,并且拥有相应的图标资源。
阅读全文