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

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

效果如图

页面代码

<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;
}复制