前言：

我们在开发中有时会用到element 中的tree树形组件，当鼠标悬停在某一节点的时候需要展示删除图标，鼠标离开后隐藏。

实现过程：

HTML部分

<el-tree :data="treeData" :props="defaultProps" node-key="id" @node-click="handleContactChange" default-expand-all highlight-current>
  <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%;">
     <span style="font-size: 14px;">{{ node.label }}</span>
     <span v-if="data.tabInfoList">
       <i class="el-icon-circle-plus-outline" @click.stop="addTab(data)"></i>
     </span>
     <span v-else>
       <i class="el-icon-delete" @click.stop="deleteTab(data)"></i>
     </span>
   </span>
 </el-tree>

css部分

.custom-tree-node {
 i {
   float: right;
   padding: 0 20px;
   height: 40px;
   line-height: 40px;
   color: #e50017;
 }
 .el-icon-delete {
   visibility: hidden;
 }
}

.el-tree-node__content:hover .el-icon-delete {
 visibility: visible;
}