el-table鼠标悬浮在表格行上时,符合条件的数据会有提示文字
时间: 2024-03-12 15:46:15 浏览: 258
当鼠标悬停,显示信息
4星 · 用户满意度95%
您可以通过在 el-table 中配置 tooltip-effect 属性来实现鼠标悬浮时显示提示文字。具体的做法是:
1. 在 el-table 中添加 tooltip-effect 属性,值为 "dark" 或 "light",表示提示文字的样式。
2. 在 el-table-column 中添加 prop 属性,值为需要显示提示文字的数据字段名称。
3. 在 el-table-column 中添加 scoped-slot,使用 slot-scope 获取当前行的数据,然后根据条件判断是否需要显示提示文字,如果需要,就使用 el-tooltip 组件来包裹需要显示的内容。
下面是一个示例代码,可以供您参考:
```
<el-table :data="tableData" tooltip-effect="dark">
<el-table-column prop="name">
<template slot-scope="scope">
<div v-if="scope.row.age > 18">
<el-tooltip class="item" effect="dark" :content="scope.row.name + '已成年'" placement="top">
<span>{{ scope.row.name }}</span>
</el-tooltip>
</div>
<div v-else>
{{ scope.row.name }}
</div>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄">
</el-table-column>
</el-table>
```
在这个示例中,当表格中的数据年龄大于18岁时,会在鼠标悬浮在当前行上时显示提示文字,内容为当前行的姓名加上"已成年"。提示文字的样式为"dark",即深色背景。
阅读全文