element el-table组件修改表格表头和某个单元格背景色
<template><div><el-table:data="tableData"style="width: 100%":cell-style="cellStyle":header-cell-style="headerCellStyle"><el-table-column prop="city" label="省份" align="center"></el-table-column><el-table-column prop="address" label="核算中心" align="center"></el-table-column><!-- 合计 --><el-table-column :label="item.label" align="center" v-for="(item,index) in tableColumn" :key="index"><el-table-column prop="city" label="准点单数" align="center"></el-table-column><el-table-column prop="address" label="总单数" align="center"></el-table-column><el-table-column :prop="item.num" label="准点率" align="center"></el-table-column></el-table-column><!-- 日期1 --><!-- <el-table-column label="3月1号" align="center"><el-table-column prop="city" label="准点单数" align="center"></el-table-column><el-table-column prop="address" label="总单数" align="center"></el-table-column><el-table-column prop="num1" label="准点率" align="center"></el-table-column></el-table-column> --><!-- 日期2 --><!-- <el-table-column label="3月2号" align="center"><el-table-column prop="city" label="准点单数" align="center"></el-table-column><el-table-column prop="address" label="总单数" align="center"></el-table-column><el-table-column prop="num2" label="准点率" align="center"></el-table-column></el-table-column> --></el-table></div></template><script>export default {name: "Tables",components: {},data() {return {tableData: [{city: "普陀区",address: "上海市",num: "95.5%",nums: "60.8%",numss: "67.3%",numsss: "90%"},{city: "普陀区",address: "上海市",num: "60.3%",nums: "90.8%",numss: "67.3%",numsss: "70%"},],tableColumn:[{label:'合计',num: "num",},{label:'3月1号',num: "nums",},{label:'3月2号',num: "numss",},{label:'3月3号',num: "numsss",}]};},mounted() {},methods: {headerCellStyle({ row, column, rowIndex, columnIndex }) {// console.log(row, column, rowIndex, columnIndex);let rowBackground = {};if ((rowIndex == 0 && columnIndex == 2) ||(rowIndex == 1 && columnIndex == 2) ||(rowIndex == 1 && columnIndex == 1) ||(rowIndex == 1 && columnIndex == 0)) {rowBackground.background = "#00f";}return rowBackground;},cellStyle({ row, column, rowIndex, columnIndex }) {// console.log(row, column, rowIndex, columnIndex,this.cmpp(row.num,'90%'));let rowBackground = {};if (column.label == "准点率") {if (this.cmpp(row[column.property], "90%")) {rowBackground.background = "#f00";} else {rowBackground.background = "#ff0";}}return rowBackground;},cmpp(a, b) {return Number(a.replace("%", "")) < Number(b.replace("%", ""));},},};</script><style scoped></style>
