el-table-column指定单元格鼠标悬浮
时间: 2023-11-22 10:49:11 浏览: 338
可以通过在`el-table-column`中使用`slot-scope`来指定单元格鼠标悬浮的效果。具体实现方法如下:
1.在`el-table-column`中添加`slot-scope`属性,指定作用域插槽的名称,例如`slot-scope="scope"`。
2.在`template`标签中添加`v-if`判断,判断当前列是否为需要添加鼠标悬浮效果的列。
3.在`template`标签中添加`v-show`判断,判断当前单元格是否处于鼠标悬浮状态。
4.在`template`标签中添加`v-tooltip`指令,设置鼠标悬浮时显示的提示信息。
下面是一个示例代码:
```html
<el-table-column label="颜色" align="center" key="color" prop="color" slot-scope="scope">
<template v-if="scope.column.label === '颜色'">
<div v-show="scope.row.isHover" v-tooltip="{ content: scope.row.color }">
{{ scope.row.color }}
</div>
<div v-show="!scope.row.isHover">
{{ scope.row.color }}
</div>
</template>
</el-table-column>
```
在上面的代码中,我们通过`v-show`指令来判断当前单元格是否处于鼠标悬浮状态,并通过`v-tooltip`指令来设置鼠标悬浮时显示的提示信息。
阅读全文