需求：是否匹配当天日期决定当天时间高亮显示
效果如图
页面代码
<el-table
ref="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-column
prop="userChinaName"
label="人力"
width="180"
align="left"
fixed
>
</el-table-column>
<el-table-column
prop="totalWorkMinutes"
label="工作量"
fixed
>
</el-table-column>
<el-table-column
v-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>
<template
v-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">
<div
slot="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'};
},
// 设置 desc
getMinutesDesc(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.js
export 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;
}
