elementUi——table组件修改表头和表身行样式——style的使用_row-style

今天在做后台管理系统时，遇到一个需求，就是根据表格中每行数据的状态，来渲染背景颜色。
如下图所示：满足一定条件时，背景颜色要改为绿色。

row-style的使用

1.在el-table上添加row-style，指定一个函数

<el-table ref="multipleTable" :data="tableData" border :row-style="tableRowStyle">
....
</el-table>
1
2
3

2.函数参数为{row,rowIndex}，根据row判断关键字段

tableRowStyle({ row }) {
    if (row.status == 40) {
        return { 'background-color': '#67c23a','color':'#fff' }
    }
}
1
2
3
4
5

我这边判断的条件就是：如果status==40，则背景颜色改为#67c23a，字体颜色改为#fff。

完成！！！

在鼠标划过行时，会有个灰色的默认色，因为已经有了背景颜色，如果划过变成灰色会比较难看，因此可以通过下面的方式去掉划过的背景色：

3.去掉hover时的背景色

.el-table--enable-row-hover .el-table__body tr:hover > td {
    background: transparent;
}
1
2
3

效果完成！！！

header-cell-style参数的使用

v-bind:header-cell-style="{'font-size':'14px','text-align':'left'}"
表示：给表头设置字号，居中方式等。