el-table表头动态变色

要实现el-table表头的动态变色，你可以使用表头的 slot-scope 属性来自定义表头的内容，并通过 CSS 样式来改变颜色。下面是一个示例代码，演示了如何根据特定条件来动态改变表头的颜色：

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="name"
      label="姓名"
      :header-cell-class-name="headerCellClassName"
    ></el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
    ></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 },
      ],
    };
  },
  methods: {
    headerCellClassName({ column }) {
      // 判断特定条件来动态改变表头的颜色
      if (column.property === 'name') {
        return 'header-color'; // 自定义 CSS 类名
      }
      return '';
    },
  },
};
</script>

<style scoped>
.header-color {
  background-color: #f0f0f0; /* 设置表头的背景色 */
  color: red; /* 设置表头的文字颜色 */
}
</style>

上述代码中，我们使用了 `:header-cell-class-name` 属性绑定了一个方法 `headerCellClassName`，该方法返回一个 CSS 类名，用于改变表头的样式。在 `headerCellClassName` 方法中，我们可以根据特定条件判断当前表头的属性，如果是我们希望改变样式的表头，则返回一个自定义的 CSS 类名。在示例中，我们判断了表头的属性是否为 `name`，如果是，则返回一个名为 `header-color` 的 CSS 类名。通过在 `<style>` 标签中定义该类名，我们可以自定义表头的背景色和文字颜色。

注意：可以根据你的需求修改条件判断和样式设置来实现你想要的动态变色效果。