el-table modify the cell background color of a column

1. Case

 2. Implementation method

 2.1 To set a single column, first of all: the first step is to use slots.

 ps: It’s best to be like me, don’t write the style on this, set a variable first.

2.2 Define variables

 2.3 Bind the style at the very beginning (we just obediently use the official website)

ps: columnIndex: the number of columns, counting from 0, my column is 3

ps: tableCellStyle is a method name, not a class name! !

 

// 在methods 里面写啊！！！

// 背景颜色处理
    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) {
        // 表格的第11行做处理
        if (row.state == "未维护") {
          // 如果是未维护 背景色蓝色，字体色白色
          return "background:#c7a027; color:#6c3a00";
        } else {
          return "background:yellow;color:#6c3a00";
        }
      } else if (columnIndex === 3) {
        this.numcolStyle =
          "background: rgb(117, 178, 229);
           display: block;
           width: 26px;
           height: 26px;
           color: rgb(255, 255, 255);
           padding: 3% 0px 0px;
           border-radius: 50%;
           margin:0 auto;";
      }
    },