el-table表格样式设置单元格样式方法 :cell-class-name

需求：是否匹配当天日期决定当天时间高亮显示

效果如图

页面代码

<el-tableref="manpowerTable":key="manpowerForUserHandle.tableKey"class="sysDictInfoTable":data="handle.manpowerTable.data"style="width: 100%;"lazy:max-height="tableHeight"size="small":indent="0":load="loadChildrenData":header-cell-style="{background: '#F7F7F9',color: '#606266'}":cell-class-name="columnStyle":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-columnprop="userChinaName"label="人力"width="180"align="left"fixed></el-table-column><el-table-columnprop="totalWorkMinutes"label="工作量"fixed></el-table-column><el-table-columnv-for="(item, index) in handle.manpowerTable.data[0].dayWorkMinuteForUserVos":key="Math.random(index)"min-width="120"align="center"><template slot="header"><div style="white-space: pre-line;text-align: center">{{ timeConverter(item.period) }}</div></template><templatev-if="scope.row && scope.row.dayWorkMinuteForUserVos && scope.row.dayWorkMinuteForUserVos[index]"slot-scope="scope"><template v-if="scope.row.dayWorkMinuteForUserVos[index].noSelectSpaceDesc"><el-popover placement="bottom" trigger="hover"><divslot="reference"class="set-content"><span      :style="getMinutesColorStyle(scope.row.dayWorkMinuteForUserVos[index].minutes)">{{ getMinutesDesc(scope.row.dayWorkMinuteForUserVos[index].minutes,true,scope.row.dayWorkMinuteForUserVos[index].noSelectSpaceDesc) }}</span></div><div><template><div class="set-popper">{{ scope.row.dayWorkMinuteForUserVos[index].noSelectSpaceDesc }}</div></template></div></el-popover></template><template v-else><div><span:style="getMinutesColorStyle(scope.row.dayWorkMinuteForUserVos[index].minutes)">{{ getMinutesDesc(scope.row.dayWorkMinuteForUserVos[index].minutes,false,null) }}</span></div></template></template></el-table-column></div></el-table>

数据格式

json
{"code": 200,"message": "请求成功","data": {"records": [{"username": "zhangsan","userChinaName": "张三","totalWorkMinutes": 2458.515,"selectSpaceWorkMinutes": 58.51499999999999,"noSelectSpaceWorkMinutes": 2400,"dayWorkMinuteForUserVos": [{"period": "2025-03-10","minutes": 18.674999999999997,"noSelectSpaceDesc": ""},{"period": "2025-03-11","minutes": 12.45,"noSelectSpaceDesc": ""},{"period": "2025-03-12","minutes": 24.9,"noSelectSpaceDesc": ""},{"period": "2025-03-13","minutes": 2.4899999999999998,"noSelectSpaceDesc": ""},{"period": "2025-03-14","minutes": 0,"noSelectSpaceDesc": ""},{"period": "2025-03-15","minutes": 0},{"period": "2025-03-16","minutes": 0}]},{"username": "lisi","userChinaName": "李四","totalWorkMinutes": 960,"noSelectSpaceWorkMinutes": 960,"dayWorkMinuteForUserVos": [{"period": "2025-03-10","minutes": 0,"noSelectSpaceDesc": ""},{"period": "2025-03-11","minutes": 0,"noSelectSpaceDesc": ""},{"period": "2025-03-12","minutes": 0},{"period": "2025-03-13","minutes": 0},{"period": "2025-03-14","minutes": 0},{"period": "2025-03-15","minutes": 0},{"period": "2025-03-16","minutes": 0}]}],"total": "2","size": "1000000","current": "1","orders": [],"optimizeCountSql": true,"searchCount": true,"pages": "1"}
}

js代码

methods: {timeConverter(date) {return date + '\n' + getWeekDay(date) + '';},
// 设置单元格样式，请注意  cell-class-name 中不能使用循环
// 并且 样式的 <style> 标签中不能有 scoped 否则样式不会生效columnStyle({row, column, rowIndex, columnIndex}) {// getToday 为自定义方法！let today = getToday();if (column.label !== undefined) {return 'cell-height';}if (this.handle.manpowerTable.data[rowIndex]?.dayWorkMinuteForUserVos[columnIndex - 2]?.period === today) {return 'cell-height-bgc';}return 'cell-height';},// 设置 字体颜色getMinutesColorStyle(minutes) {if (!minutes || minutes === 0) {return {color: '#208fdc'};}else if (minutes / 60 === 8) {return {color: '#808080'};}else if (minutes / 60 > 8) {return {color: '#ef445f'};}return {color: '#72d53f'};},// 设置 descgetMinutesDesc(minutes, isDesc, desc) {if (minutes === 0 && isDesc) {return this.noSelectDescCover(desc);}else if (minutes === 0 && !isDesc) {return ' - ';}else if (minutes !== 0) {return (minutes / 60).toFixed(2) + 'h';}}
}

样式代码

<style>.cell-height {height: 10px;}.cell-height-bgc {background-color: #FFDEE7;height: 10px;}
</style>

其他代码

tool.jsexport function getWeekDay(date) {let weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];let myDate = new Date(Date.parse(date));return weekDay[myDate.getDay()];
}export function getToday() {// 获取当前日期let date = new Date();// 获取当前月份let nowMonth = date.getMonth() + 1;// 获取当前是几号let strDate = date.getDate();// 添加分隔符“-”let seperator = '-';// 对月份进行处理，1-9月在前面添加一个“0”if (nowMonth >= 1 && nowMonth <= 9) {nowMonth = '0' + nowMonth;}// 对月份进行处理，1-9号在前面添加一个“0”if (strDate >= 0 && strDate <= 9) {strDate = '0' + strDate;}// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期return date.getFullYear() + seperator + nowMonth + seperator + strDate;
}