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

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

1.为某一行指定样式

在表格中添加属性

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

      <el-table
        :data="tableData"
        stripe
        class=""
        style="width: 100%"
        :cell-style="cellStayle"
      >
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="regionIndexName" label="所属区域"></el-table-column>
      </el-table>

写入方法

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";
    }
},

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