element plus为表格某列数据文字设置颜色样式

有时候业务需要,需要将表格里的数据换上不同颜色的样式,以便查看,查看官方文档,有一个属性可以修改表格的样式


话不多说,放代码:

<el-table ref="multipleTableRef" 
    :data="tableData" 
    style="width: 100%"
    @selection-change="selectionChange"
    :cell-style="cellStyle"
    >
      ...
      <el-table-column property="type" label="一级分类">
      </el-table-column>
      <el-table-column property="classify" label="二级分类"/>
      ...
      <el-table-column property="standardState" label="标准状态"/>
 
    </el-table>

js:

  const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
      // 状态列字体颜色
      // columnIndex 列下标
      // rowIndex 行下标
      // row 行
      // column 列
     if (row.type !=null && columnIndex === 3) {
        return { color: "#189EFF" };
      }else if (row.classify != null && columnIndex === 4) {
        return { color: "#189EFF" };
      } else if (row.standardState =='现行' && columnIndex === 6) {
        return { color: "#1CD66C" };
      } else if (row.standardState == '即将实施' && columnIndex === 6) {
        return { color: "#189EFF" };
      } else if (row.standardState == '废止' && columnIndex === 6) {
        return { color: "red" };
      }
    }