el-table修改背景颜色
时间: 2023-11-11 15:00:13 浏览: 94
可以通过设置 el-table 的 row-class-name 属性来修改表格行的背景颜色。具体操作如下:
1. 在 el-table 标签上添加 row-class-name 属性,值为一个函数名,例如:row-class-name="tableRowClassName"
2. 在 methods 中定义 tableRowClassName 函数,该函数接收一个参数 row,表示当前行的数据对象。在函数中根据需要返回一个字符串,该字符串即为当前行的 class 名称,可以在样式表中定义该 class 的样式。
示例代码如下:
```
<el-table :data="tableData" row-class-name="tableRowClassName">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
...
methods: {
tableRowClassName({ row }) {
if (row.age > 30) {
return 'table-row-red';
} else {
return 'table-row-green';
}
}
}
```
在上面的示例中,如果当前行的 age 大于 30,则返回 'table-row-red',否则返回 'table-row-green',可以在样式表中定义这两个 class 的样式。
阅读全文