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>

2.写入方法

cellStayle(row , colum , rowIndex , columnIndex) {
    if (row.row.viewFlag == "1") {
        return "color : Silver";
    }
    // row.row.viewFlag 为tableData中的属性
},

以上方法针对某一行样式进行整体修改

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

cellStayle(row , colum , rowIndex , columnIndex) {
    if (row.row.viewFlag == "1" && row.colum.label == '所属组织') {
        return "color : Silver";
    }
},

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