elementplus自定义table表头背景色

Element Plus 是 Vue 3 的 UI 组件库，它基于 Element UI 进行了现代化和轻量化的改造。在 Element Plus 中，自定义 Table（表格）表头背景色可以通过 CSS 或者组件的 API 实现。

**CSS 方式**：

.el-table th {
  background-color: <your-desired-color>; /* 将 `<your-desired-color>` 替换为你想要的颜色 */
}

这里，`<your-desired-color>` 可以是你需要的任何有效的 CSS 颜色值，如 `#f00` 表示红色，`rgba(0, 0, 255, 0.8)` 表示半透明蓝色等。

**通过 API 方式**：
如果你使用的是 Element Plus 的 Table 组件，并且想在运行时动态设置背景色，你可以这样做：

<template>
  <el-table ref="table">
    <!-- ... -->
    <el-table-column v-for="(column, index) in columns" :key="index" :property="column.property">
      <template slot-scope="{ $row }">
        <span :style="{ backgroundColor: column.headerBgColor || '' }">{{ $row[column.property] }}</span>
      </template>
    </el-table-column>
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        // ...
        { property: 'yourColumn', headerBgColor: '#f00' },  // 设置特定列的背景颜色
        // ...
      ],
    };
  },
};
</script>

在 `columns` 数组中，为每个你想定制背景色的表头指定 `headerBgColor` 属性。