前言:
我们在开发中有时会用到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;
}