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

一、问题描述

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

二、具体实现

1.模板设置

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

html 复制代码

<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。使用这个标识给某一列返回一个类名来决定样式。如果需要多列或者是多表头，表头是合并的，则需要将几个列统一返回类名。
注意：

javascript 复制代码

// 表头类名处理函数
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上，具体的位置需要查看自己的项目模板结构，一般来说会在如下位置(共参考)：

css 复制代码

/* 需求表头样式 */
: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;
}