快捷導(dǎo)航

element table列表根據(jù)數(shù)據(jù)設(shè)置背景色

更新時(shí)間：2023年08月24日 11:17:03 作者：冷冰染

在使用elementui中的el-table時(shí),需要將表的背景色和字體顏色設(shè)置為新顏色,本文就來介紹一下element table列表根據(jù)數(shù)據(jù)設(shè)置背景色,感興趣的可以了解一下

效果

頁面代碼

通過 :cell-class-name 動態(tài)綁定類名

    <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>

數(shù)據(jù)

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

js方法

直接寫到 methods 中，列表綁定即可，不需要放到生命周期中。

    // 修改單元格樣式的方法
    myclass({ row, column, rowIndex, columnIndex }) {
      // row當(dāng)前行，column表格列，rowIndex表格的第幾行，columnIndex第幾個(gè)格子
      // 根據(jù)當(dāng)前行的參數(shù)判斷，修改當(dāng)前行樣式
      if (row.isShow == 0) {
        return "setclass";
      } else if (row.isShow == 2) {
        return "setSuccess";
      }
      // 還可以設(shè)置對應(yīng)單元格顏色
      // 表格的第二行-起始下標(biāo)0
      if (rowIndex === 1) {
        // 第二行下標(biāo)為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>

動態(tài)刷新列表數(shù)據(jù)關(guān)聯(lián)列表背景色

當(dāng)列表數(shù)據(jù)更改時(shí)，我們需要根據(jù)列表數(shù)據(jù)來動態(tài)判斷列表是否高亮提示，此時(shí)只需要更改列表數(shù)據(jù)即可，列表重載數(shù)據(jù)會再次動態(tài)刷新，不需要調(diào)用任何方法。

// 數(shù)據(jù)未上述列表數(shù)據(jù)
    isDanger() {
      this.tableData.forEach((el,index) => {
        if(index % 2 == 0){
          el.isShow = 0
        }else {
          el.isShow = 2
        }
      });
    }