vue 实现鼠标移入移出表格,显示影藏图标, 并弹出提示内容
效果:1. Table代码<el-table :data="tableData" ref="multipleTable" class="multTable"row-key="id"@cell-mouse-enter="mouseOver"@cell-mouse-leave="mouseLeave"><el-table-column type="index" label="优先级"
·
效果:
1. Table代码
<el-table :data="tableData" ref="multipleTable" class="multTable"
row-key="id" @cell-mouse-enter="mouseOver" @cell-mouse-leave="mouseLeave">
<el-table-column type="index" label="优先级" width="100px">
<template slot-scope="scope">
<i class="iconfont" v-show="scope.row.showIcon"></i>
<el-popover
placement="top-start"
width="200"
trigger="hover"
content="我是提示内容">
<el-button slot="reference" type="text">{{ scope.$index + 1 }}</el-button>
</el-popover>
</template>
</el-table-column>
<el-table>
2. 重点: @cell-mouse-enter鼠标移入 @cell-mouse-leave="mouseLeave"鼠标移出
3. 初始化表格数据,定义showIcon字段为false
methods:{
this.dataList.forEach((item) => {
item.showIcon = false
})
}
4. 自定义弹出提示内容:
<el-popover
placement="top-start"
width="200"
trigger="hover"
content="我是提示内容">
<el-button slot="reference" type="text">{{ scope.$index + 1 }}</el-button>
</el-popover>
5. 鼠标移入、移除事件:
methods:{
mouseOver(row) {
row.showIcon = true
},
mouseLeave(row) {
row.showIcon = false
},
}
end...
掘金
更多推荐
已为社区贡献2条内容
所有评论(0)