element ui 实现让表格内的内容自定义颜色

发布时间 2023-03-25 15:53:38作者: 像风啦飞驰
 
element ui 官网链接

element-plus ui Table 介绍

Table的属性

cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 function({ row, column, rowIndex, columnIndex }) / object
 
<el-table
              size="large "
              :cell-style="cellStyle"
              :data="StockSummary"
              empty-text="未查询到数据"
              :header-cell-style="{ background: '#190F50', color: '#ffffff' }"
              :row-style="{ background: '#190F50', color: '#ffffff' }"
            >
</el-table>
cellStyle(row, column, rowIndex, columnIndex) {
      //根据报警级别显示颜色
      if (row.column.label === "库存状态" && (row.row.Description === "库存大于上限"||row.row.Description === "库存少于下限")) {
        let styleJson = {
            "color":"red"
          };
        return styleJson;
      }
    },

注意:最开始百度的答案是直接

 return 'color: red';

是不行的,报错 TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported.

官网说要返回对象.