element UI动态表头怎么改内容的样式

您可以使用 ElementUI 表格的 `header-cell-style` 属性来改变表头单元格的样式。

具体实现方式如下：

1. 在表格的 `el-table-column` 组件中添加 `header-cell-style` 属性，并将其设置为一个对象。例如，以下代码将表头单元格的背景色设置为灰色：

<el-table-column prop="name" label="姓名" :header-cell-style="{ 'background-color': '#ccc' }"></el-table-column>

2. 在 `header-cell-style` 对象中，可以设置 CSS 样式，例如 `background-color`、`color`、`font-size` 等。您可以根据具体的需求进行设置。

<el-table-column prop="name" label="姓名" :header-cell-style="{ 'background-color': '#ccc', 'color': '#fff', 'font-size': '16px' }"></el-table-column>

注意，您也可以在表格组件的 `header-cell-class-name` 属性中设置表头单元格的类名，然后在 CSS 样式表中定义相应的样式，以实现更加灵活的样式设置。例如：

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

methods: {
  headerCellClassName({ column }) {
    if (column.property === 'age') {
      return 'header-cell-age';
    }
  }
}

.header-cell-age {
  background-color: #ccc;
  color: #fff;
  font-size: 16px;
}

在上面的代码中，我们使用 `header-cell-class-name` 属性来设置表头单元格的类名，然后在 CSS 样式表中定义了 `.header-cell-age` 类来设置表头单元格的样式。这种方式可以更加灵活地控制表头单元格的样式。