今天在做后台管理系统时,遇到一个需求,就是根据表格中每行数据的状态,来渲染背景颜色。
如下图所示:满足一定条件时,背景颜色要改为绿色。
row-style
的使用
1.在el-table
上添加row-style
,指定一个函数
<el-table ref="multipleTable" :data="tableData" border :row-style="tableRowStyle">....</el-table>
2.函数参数为{row,rowIndex}
,根据row
判断关键字段
tableRowStyle({row }) {if (row.status == 40) {return {'background-color': '#67c23a','color':'#fff' }}}
我这边判断的条件就是:如果status==40
,则背景颜色改为#67c23a
,字体颜色改为#fff
。
完成!!!
在鼠标划过行时,会有个灰色的默认色,因为已经有了背景颜色,如果划过变成灰色会比较难看,因此可以通过下面的方式去掉划过的背景色:
3.去掉hover
时的背景色
.el-table--enable-row-hover .el-table__body tr:hover > td {background: transparent;}
效果完成!!!
header-cell-style参数的使用
v-bind:header-cell-style="{'font-size':'14px','text-align':'left'}"
表示:给表头设置字号,居中方式等。