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

1、tree 组件代码

　　span里不显示换成data.label试试

<el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all node-key="id"  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、方法

data根据情况定义

        defaultProps: {
          children: 'children',
          label: 'label'
        },

methods

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

 

3、样式

原文链接：(10条消息) element-ui的el-tree 实现鼠标移入子节点，显示删除、修改等功能按钮_chuxuan0215的博客-CSDN博客