效果
页面代码
通过: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>