关于前端:element-table列表根据数据设置背景色

成果

页面代码

通过 :cell-class-name 动静绑定类名

    <el-table :data="tableData" style="width: 100%" :cell-class-name="myclass">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

数据

      tableData: [
        {
          date: "2023-05-02",
          name: "兔子先森",
          address: "上海市普陀区金沙江路 1518 弄",
          isShow: 1,
        },
        {
          date: "2023-05-04",
          name: "兔子先森",
          address: "上海市普陀区金沙江路 1517 弄",
          isShow: 1,
        },
        {
          date: "2023-05-01",
          name: "兔子先森",
          address: "上海市普陀区金沙江路 1519 弄",
          isShow: 0,
        },
        {
          date: "2023-05-03",
          name: "兔子先森",
          address: "上海市普陀区金沙江路 1516 弄",
          isShow: 2,
        },
      ],

js 办法
间接写到 methods 中，列表绑定即可，不须要放到生命周期中。

    // 批改单元格款式的办法
    myclass({row, column, rowIndex, columnIndex}) {
      // row 以后行，column 表格列，rowIndex 表格的第几行，columnIndex 第几个格子
        
      // 依据以后行的参数判断，批改以后行款式
      if (row.isShow == 0) {return "setclass";} else if (row.isShow == 2) {return "setSuccess";}

      // 还能够设置对应单元格色彩
      // 表格的第二行 - 起始下标 0
      if (rowIndex === 1) {
        // 第二行下标为 1 的格子
        if (columnIndex == 1) {return "setHeight";}
      }
    },

css 局部
不能应用 scope 作用域，否则背景色不失效

<style lang='scss'>
.setclass {
  background: yellow !important;
  color: red !important;
}
.setSuccess {
  background: green !important;
  color: white !important;
}
.setHeight {color: blue !important;}
</style>

动静刷新列表数据关联列表背景色

当列表数据更改时，咱们须要依据列表数据来动静判断列表是否高亮提醒，此时 只须要更改列表数据即可 ，列表重载数据会再次动静刷新， 不须要调用任何办法。

// 数据未上述列表数据
    isDanger() {this.tableData.forEach((el,index) => {if(index % 2 == 0){el.isShow = 0}else {el.isShow = 2}
      });
    }