<el-table border :data="infoDataList">给单独行加颜色
时间: 2024-03-01 11:51:40 浏览: 102
要给单独的行加颜色,你可以使用Element UI表格组件提供的`row-class-name`属性,该属性可以设置一个返回类名的函数,根据函数的返回值来决定行的样式类名。具体实现方法如下:
1. 在`data`中定义一个变量,用于存储需要高亮显示的行的行号或其他标识信息,比如`highlightRow`。
2. 在`methods`中定义一个方法,该方法接收行数据作为参数,根据行数据的某些属性来判断该行是否需要高亮显示。
3. 在表格组件中添加`row-class-name`属性,将其绑定到刚刚定义的方法上。
示例代码如下:
```html
<el-table border :data="infoDataList" :row-class-name="highlightRowClass">
</el-table>
```
```javascript
data() {
return {
highlightRow: 1 // 假设需要高亮显示第2行
}
},
methods: {
highlightRowClass(row) {
if (row.id === this.highlightRow) {
return 'highlight-row'
} else {
return ''
}
}
}
```
上面的代码中,`highlightRowClass`方法接收一个行数据对象`row`作为参数,如果该行的`id`属性等于`highlightRow`变量的值,则返回`highlight-row`类名,否则返回空字符串。我们可以在CSS中定义`.highlight-row`样式,来实现对该行的高亮显示。
阅读全文