开发:
- 查看组件文档,v3以上版本 已经废弃了slots 和scopedSlots 两个属性(v3以下支持);
- 实现效果如上:

- 方案(失败)
- 方案一:采用collaps折叠面板实现,但是发现存在很多问题,(1)选中项无法高亮;(2)折叠事件与按钮事件发生交叉,导致折叠面板展示不流畅。
- 方案二:修改组件源码,但是担心破坏组件内部结构,直接放弃。
- 参考文章 地址:events.jianshu.io/p/a87269a22…
- 实现思路:
- 使用title插槽,添加自定义按钮;
- 获取相关数据,封装成组件所需数据结构;
- 代码如下:
<a-tree
ref="treeRef"
:tree-data="treeData"
:defaultExpandAll="false"
blockNode>
<template v-slot:title="nodeData">
<a-button size="small">新增</a-button>
<a-button size="small">修改</a-button>
<a-popconfirm
title="确认删除该结点吗?"
ok-text="确认"
cancel-text="取消"
@confirm="delete(nodeData)">
<a-button>删除</a-button>
</a-popconfirm>
</template>
</a-tree>
- 如实现有问题,可以私信我。