element-ui的el-tree 实现鼠标移入子节点,显示删除按钮?

官方文档是一直显示删除按钮的做法,想实现通过鼠标移入移出控制按钮显示隐藏的效果。
试了通过mouseenter和render-content方法都不行。有什么办法?

阅读 2.8k
评论 2019-01-12 提问
    1 个回答

    很简单的,利用mouseentermouseenter动态改变新增的一个del字段就能控制隐藏显示了
    预览:https://jsfiddle.net/7angv9cy/

    <el-table-column label="操作">
        <template slot-scope="scope">
            <div @mouseenter="mouseenter(scope)" @mouseleave="mouseleave(scope)">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button v-show="scope.row.del" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </div>
        </template>
    </el-table-column>
    mouseenter(scope){
        this.$set(scope.row, 'del', true)
    },
    mouseleave(scope){
        this.$set(scope.row, 'del', false)
    }

    clipboard.png

    评论 赞赏