element table列表根据数据设置背景色
作者：冷冰染
在使用elementui中的el-table时,需要将表的背景色和字体颜色设置为新颜色,本文就来介绍一下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
}
});
}