成果
页面代码
通过: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 } }); }