element-ui的el-tree 实现鼠标移入子节点，显示删除、修改等功能按钮

1、tree 组件代码

 

<el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all node-key="id" :filter-node-method="filterNode" ref="tree">
    <span class="custom-tree-node" slot-scope="{ node, data }" style="width:100%;" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
        <span>{{ node.label }}</span>
        <el-link v-show="data.del" size="mini" type="primary" @click="alert('删除')" style="float:right;" icon="el-icon-delete"></el-link>
        <el-link v-show="data.del" size="mini" type="primary" @click="alert('修改')" style="margin-right: 10px;float:right;" icon="el-icon-edit"></el-link>
    </span>
</el-tree>

2、方法

利用mouseenter和mouseenter动态改变新增的一个del字段就能控制隐藏显示了

mouseenter(data){
    this.$set(data, 'del', true)
},
mouseleave(data){
    this.$set(data, 'del', false)
}

3、样式