el-table 数据中高亮
时间: 2024-03-21 07:35:20 浏览: 97
模型查询结果高亮显示
在 Element UI 的 el-table 组件中,可以通过自定义样式来实现数据的高亮显示。具体的实现方式如下:
1. 首先,在 el-table 的列定义中,可以使用 scoped slot 来自定义每个单元格的内容和样式。例如,可以在 el-table-column 中添加一个 scoped slot,用于渲染每个单元格的内容:
```html
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<div :class="{'highlight': scope.row.highlight}">
{{ scope.row.name }}
</div>
</template>
</el-table-column>
```
2. 在数据源中,为需要高亮显示的行添加一个属性,例如 `highlight`,并设置为 `true`:
```javascript
data() {
return {
tableData: [
{ name: '张三', age: 20, highlight: true },
{ name: '李四', age: 25, highlight: false },
{ name: '王五', age: 30, highlight: true },
]
}
}
```
3. 在 CSS 样式中定义高亮的样式,例如:
```css
.highlight {
background-color: yellow;
}
```
这样,具有 `highlight` 属性为 `true` 的行将会以黄色背景高亮显示。
阅读全文