Vue（26）el-tree树形控件实现鼠标hover显示与隐藏

Vue实现el-tree鼠标hover显示隐藏按钮

最新推荐文章于 2025-10-10 15:50:46 发布

原创

最新推荐文章于 2025-10-10 15:50:46 发布 · 5.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue #python #js #javascript #二叉树

本文介绍了如何使用Vue的el-tree组件，通过mouseover和mouseout事件及v-if指令，实现在树节点上鼠标悬停时显示按钮，离开时隐藏按钮的效果。

实现效果与原理

我们希望实现鼠标移动至树型结构的结点上就显示按钮，移出就隐藏按钮实现原理：是通过@mouseenter 和 @mouseleave两个属性来控制鼠标hover的效果，再配合v-show来控制是否展示你需要的控件

具体代码

<el-tree
  :data="data"
  ref="tree"
  default-expand-all
  node-key="id"
  :expand-on-click-node="false">
  <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
    <span>{
   
   { node.label }}</span>
    <span>
      <el-tooltip v-show="data.show" class="item" effect="dark" content="文字提示" placement="top">
        <el-button
          type="text"
          size="mini"
          @click="() => append(data)"