el-table 修改某一列的单元格背景色

1. 案例

 2. 实现方法

 2.1 给单独某一列设置,首先:第一步想到的是用插槽。

 ps:最好是跟我一样,样式不要在这个上面写,先定一个变量。

2.2  定义变量

 2.3  在最开始绑定样式(咱就乖乖的用人家官网上的即可)

ps: columnIndex :列数,从0开始数 ,我这一列是 3

ps:tableCellStyle 是个方法名,不是个类名哦!!

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

猜你喜欢

转载自blog.csdn.net/CMDN123456/article/details/130647274
今日推荐