antd +vue3 a-tree 组件 右侧添加操作按钮

1,513 阅读1分钟

开发:

  1. 查看组件文档,v3以上版本 已经废弃了slots 和scopedSlots 两个属性(v3以下支持);
  2. 实现效果如上: 5b682787-4138-42d1-8565-a1b728bc2e0a.jpg
  3. 方案(失败)
  • 方案一:采用collaps折叠面板实现,但是发现存在很多问题,(1)选中项无法高亮;(2)折叠事件与按钮事件发生交叉,导致折叠面板展示不流畅。
  • 方案二:修改组件源码,但是担心破坏组件内部结构,直接放弃。
  1. 参考文章 地址:events.jianshu.io/p/a87269a22…
  2. 实现思路:
  • 使用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>
  1. 如实现有问题,可以私信我。