修改elementui el-table不同的表头背景颜色

这篇文章距离上次修改已过215天，其中的内容可能已经有所变动。

在Element UI中，要为el-table的不同表头设置不同的背景颜色，可以通过添加一个自定义类名到el-table，然后使用CSS选择器来指定不同表头的样式。

以下是一个简单的示例：

首先，在你的Vue组件模板中，给el-table添加一个自定义类名（比如叫custom-table）：

<template>
  <el-table
    :data="tableData"
    class="custom-table"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

然后，在你的样式文件中（可能是<style>标签内或者外部CSS文件），定义不同表头背景色的CSS：

<style scoped>
.custom-table .el-table__header-wrapper tr {
  background-color: #f2f2f2; /* 默认的表头背景色 */
}

.custom-table .el-table__header-wrapper tr th.first-column {
  background-color: #ffcccc; /* 第一列的特殊背景色 */
}

.custom-table .el-table__header-wrapper tr th.second-column {
  background-color: #ccffcc; /* 第二列的特殊背景色 */
}
</style>

在上面的CSS中，.first-column和.second-column是你要为不同的表头指定的自定义类名。你需要确保你的表格列定义中包含这些类名：

<el-table-column
  prop="date"
  label="日期"
  width="180"
  class-name="first-column"> <!-- 第一列的自定义类名 -->
</el-table-column>

<el-table-column
  prop="name"
  label="姓名"
  width="180"
  class-name="second-column"> <!-- 第二列的自定义类名 -->
</el-table-column>

通过这种方式，你可以为el-table的不同表头设置不同的背景颜色。记得在你的组件中包含必要的tableData数据，以便表格可以正常显示数据。

修改elementui el-table不同的表头背景颜色

评论已关闭

推荐阅读