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博客