vue element-ui 鼠标悬停时table该行操作按钮显示与隐藏
<template><el-table :data="tableColumns" border ><el-table-column type="index" label="序号"></el-table-column><el-table-column label="国家" prop="country_name"></el-table-
·
<template>
<el-table :data="tableColumns" border >
<el-table-column type="index" label="序号">
</el-table-column>
<el-table-column label="国家" prop="country_name"></el-table-column>
<el-table-column label="">
<template>
//将要显示隐藏的操作放置于此
<div class="operation_show">
<el-button type="">编辑</el-button>
<el-button type="">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'TableColumn',
data () {
return {
tableColumns: [
{ country_name: '中国' },
{ country_name: '朝鲜' },
{ country_name: '俄罗斯' }
]
}
}
}
</script>
//显示隐藏所需css
<style scoped>
.operation_show {
display: none;
}
.el-table__body tr:hover > td .operation_show {
display: block;
}
</style>
更多推荐
已为社区贡献7条内容
所有评论(0)