目錄

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