element table列表根据数据设置背景色

效果

页面代码

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

数据

      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作用域，否则背景色不生效

.setclass {
  background: yellow !important;
  color: red !important;
}
.setSuccess {
  background: green !important;
  color: white !important;
}
.setHeight {
  color: blue !important;
}

---

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

当列表数据更改时，我们需要根据列表数据来动态判断列表是否高亮提示，此时只需要更改列表数据即可，列表重载数据会再次动态刷新，不需要调用任何方法。

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

---

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 【重学C++】04 | 说透C++右值引用（上）

文章首发 【重学C++】04 | 说透C++右值引用（上） 引言 大家好，我是只讲技术干货的会玩code，今天是【重学C++】的第四讲，在前面《03 | 手撸C++智能指针实战教程》中，我们或多或少接触了右值引用和移动的一些用法。 右值引用是 C++11 标准…