vue.js 前端 ElementUI的el-table表格使用cell-style根据表格不同数据显示不同颜色

ElementUI的el-table表格使用cell-style根据表格不同数据显示不同颜色

1.为某一行指定样式

在表格中添加属性

在el-table标签中添加 :cell-style=“cellStayle”

:data="tableData"

stripe

class=""

style="width: 100%"

:cell-style="cellStayle"

>

写入方法

cellStayle(row , colum , rowIndex , columnIndex) {

if (row.row.viewFlag == "1") {

return "color : Silver";

}

// row.row.viewFlag 为tableData中的属性

},

2.对某一格修改样式

如果要针对某一单元格进行修改的话只需将判断条件设置为其属性进行判断即可，代码如下

cellStayle(row , colum , rowIndex , columnIndex) {

if (row.row.viewFlag == "1" && row.colum.label == '所属组织') {

return "color : Silver";

}

},

如此便可将某一单元格的样式进行修改。

参考阅读

 您阅读本篇文章共花了：