el-table每一行根据不同的状态显示不同的颜色背景
时间: 2023-08-07 16:32:19 浏览: 101
您可以通过在el-table的row-class-name属性中绑定一个方法来实现不同状态下显示不同颜色背景的效果。
首先,您需要在el-table上绑定一个row-class-name属性,如下所示:
```html
<el-table :data="tableData" :row-class-name="tableRowClassName">
<!-- 表格列 -->
</el-table>
```
然后,您需要在methods中定义一个tableRowClassName方法,该方法会接收一个参数row,表示当前行的数据对象。您可以在该方法中根据row的状态来返回不同的class名字,如下所示:
```javascript
methods: {
tableRowClassName({ row }) {
switch (row.status) {
case 'success':
return 'success-row';
case 'error':
return 'error-row';
case 'warning':
return 'warning-row';
default:
return '';
}
},
}
```
最后,您需要在样式中定义对应的class名字,来实现不同状态下显示不同颜色背景的效果,如下所示:
```css
.success-row {
background-color: #f0f9eb;
}
.error-row {
background-color: #fef0f0;
}
.warning-row {
background-color: #fffbe6;
}
```
这样,当您的表格数据中有不同状态的数据时,el-table就会根据不同状态来显示不同颜色的背景了。