elementui动态设置table表头颜色

要动态设置 ElementUI 表格的表头颜色，可以通过自定义表头的 slot-scope 属性和 CSS 样式来实现。

首先，在表格中的 el-table-column 标签中设置 scoped-slot 属性：

<el-table-column prop="name" label="姓名" width="100" scoped-slot="header">
  <template slot-scope="scope">
    <div class="custom-header">{{ scope.column.label }}</div>
  </template>
</el-table-column>

在上面的代码中，我们定义了一个自定义的表头 slot，将表头的 label 内容放在一个 div 容器中，并添加了一个自定义的 CSS 类名 custom-header。

接下来，我们可以在 CSS 样式中设置自定义的表头颜色：

.custom-header {
  color: #fff;
  background-color: #409EFF;
}

这里我们将表头文字设置为白色，背景色设置为 ElementUI 主题色中的深蓝色 #409EFF。

通过上述方式，我们就可以实现动态设置 ElementUI 表格表头的颜色了。

相关问题

elementui table设置表头样式

可以使用 `header-cell-style` 属性来设置表头单元格的样式，例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" header-cell-style="{background: '#f5f7fa', color: '#909399'}"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

上面的例子中，设置了第一列表头单元格的背景色为 `#f5f7fa`，文字颜色为 `#909399`。你可以根据自己的需要进行调整。

elementui table的表头如何替换颜色

你可以通过在表头中使用 `header-row-class-name` 属性来替换表头的颜色。这个属性可以指定一个 CSS 类名，用于对表头行进行样式设置。例如：

<el-table :data="tableData" header-row-class-name="table-header">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

然后在 CSS 样式表中定义 `.table-header` 类的样式，如下所示：

.table-header {
  background-color: #f5f5f5;
  color: #333;
}

这样就可以将表头的背景色替换为浅灰色，文字颜色替换为深灰色。