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

实现效果与原理

我们希望实现鼠标移动至树型结构的结点上就显示按钮，移出就隐藏按钮实现原理：是通过@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=