0

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

2019-01-12 提问
1 个回答
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

撰写答案

推广链接