Vue2：el-tree用scope slot为每一个节点添加一个鼠标悬浮时出现的右对齐的按钮

我是飞鸟呀

于 2025-01-20 18:00:00 发布

阅读量497

点赞数

分类专栏： Vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/l_q_l/article/details/145209822

版权

Vue 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

el-tree中，每一个节点后面添加一个按钮，响应除节点点击事件之外的操作，要求：

1、按钮在鼠标悬浮在该节点之上时才出现

2、按钮右对齐

实现如下。

1、为每个节点添加按钮

从官网说明来看，有两种方式添加按钮，render-content和 scoped slot，我使用的是scoped slot方式：

<el-tree
              :data="projectOptions"
              :props="defaultProjectTreeProps"
              default-expand-all
              ref="tree"
              row-key="unid"
              tooltip-effect="light"
              :highlight-current="true"
              @node-click="handleNodeClick"
            >
              <span slot-scope="{ node, data }">

了解本专栏