当前位置：首页 > news >正文

Vue3 element ui 给表格的列设置背景颜色

news 2025/8/21 9:33:16

一、问题描述

给element ui table表格的列设置背景颜色，不同于行设置背景颜色，列设置需要两个 className 的回调方法，分别设置表头和body。

二、具体实现

1.模板设置

header-cell-class-name 和cell-class-name分别为表头、body的className，用于控制对应的样式类名。

<el-table :data="tableData" style="width: 100%" height="calc(100vh - 240px)":header-cell-class-name="headerCellClassName" :cell-class-name="cellClassName"></el-table>

2.函数实现

函数接收一个参数column ,使用每一列的唯一标识做区分，官方使用的是property。使用这个标识给某一列返回一个类名来决定样式。如果需要多列或者是多表头，表头是合并的，则需要将几个列统一返回类名。
注意：

// 表头类名处理函数
const headerCellClassName = ({ column }) => {const prop = column.property;if (prop === "checkUC" || prop === "checkUCReview" || prop === "checkVersionPlan" || prop === "checkSprintPlanning") {return 'checkUC-header-column'}if (prop === "checkDesign" || prop === "checkDesignReview" || prop === "checkPipeline" || prop === "checkPR" || prop === "checkLocalTest" || prop === "checkTestingEmail") {return 'checkDesign-header-column'}
};// body类名处理函数
const cellClassName = ({ column }) => {const prop = column.property;if (prop === "checkUC" || prop === "checkUCReview" || prop === "checkVersionPlan" || prop === "checkSprintPlanning") {return 'checkUC-body-column'}if (prop === "checkDesign" || prop === "checkDesignReview" || prop === "checkPipeline" || prop === "checkPR" || prop === "checkLocalTest" || prop === "checkTestingEmail") {return 'checkDesign-body-column'}
};

3.样式实现

给每个类名添加到表头和body上，具体的位置需要查看自己的项目模板结构，一般来说会在如下位置(共参考)：

/* 需求表头样式 */
:deep(.el-table th.checkUC-header-column) {// background-color: #fefdca !important;background-color: #e7e8e9 !important;color: white;font-weight: bold;
}/** 需求body颜色 */
:deep(.el-table td.checkUC-body-column) {background-color: #e7e8e9 !important;
}/* 开发设计表头样式 */
:deep(.el-table th.checkDesign-header-column) {background-color: #ffcfdf !important;color: white;font-weight: bold;
}/** 开发设计body颜色 */
:deep(.el-table td.checkDesign-body-column) {background-color: #ffcfdf  !important;
}