el-table 给单元格设置背景色

目录

1. 效果图

2. 使用官网 cell-style

3.  (el-table 绑定) 上代码

4. js 部分(方法)

---

1. 效果图

2. 使用官网 cell-style

3.  (el-table 绑定) 上代码

<el-table
        ref="tableRef"
        :data="tableData"
        style="height: 77%; width: 96%;margin:0 2%"
        border
        height="427"
        @row-click="clickRow"
        :cell-style="tableCellStyle" 
        :row-style="{height:'30px'}"
      >

4. js 部分(方法)

ps:如果不知道接受的参数是什么意思，就像我一样，每个都打印。

    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      console.log("背景色：");
      console.log("row===:", row);
      console.log("column===:", column);
      console.log("rowIndex===:", rowIndex);
      console.log("columnIndex===:", columnIndex);
      if (columnIndex === 1) {
        debugger;
        // 表格的第2列做处理
        if (row.state == "未维护") {
          // 如果是未维护 背景色蓝色，字体色白色
          return "background:#c7a027; color:#6c3a00";
        } else {
          return "background:yellow";
        }
      } else {
        return "";
      }
    },