el-tree实现鼠标移入出现/移除功能按钮

Math.random( ) ;

于 2021-12-06 15:10:37 发布

阅读量2.8k

点赞数 2

文章标签：前端 elementui vue

本文链接：https://blog.youkuaiyun.com/xcxcsdn/article/details/121747403

版权

本文介绍了如何在Vue项目中利用Element UI的el-tree组件，实现在鼠标移入节点时显示编辑、添加和删除功能按钮，而鼠标移出时隐藏这些操作按钮的功能。通过这种方式，可以提升用户交互体验，使得操作更加直观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下，当鼠标移入：

当鼠标移出：编辑、添加和删除的功能按钮便消失

上代码：

<el-tree
              ref="tree"
              :data="dataArr"
              node-key="id"
              :expand-on-click-node="true"
              :default-expanded-keys="oneTree"
              :props="defaultProps"
              highlight-current
              class="personTree"
              :filter-node-method="filterNodes"
              @node-click="nodeClick"
              @node-expand="handleNodeExpand"
              @node-collapse="handleNodeCollapse"