el-table自定义表头

要自定义el-table的表头，您可以使用以下步骤：

1. 首先，您需要在el-table中使用自定义表头插槽。这可以通过将表头插槽名称设置为“header”来完成。例如：

<el-table :data="tableData">
  <template slot="header">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </template>
  ...
</el-table>

2. 您可以在表头插槽中添加任何自定义内容，例如图标、按钮等。

3. 您还可以使用表头插槽来自定义表头的样式。例如，您可以添加CSS类或样式属性来更改表头的颜色、字体大小等。例如：

<el-table :data="tableData">
  <template slot="header">
    <tr class="my-custom-header">
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </template>
  ...
</el-table>

.my-custom-header th {
  color: red;
  font-size: 16px;
}

4. 您还可以使用el-table的表头属性来更改表头的默认样式。例如，您可以更改表头的高度、背景颜色等。例如：

<el-table :data="tableData" :header-row-style="{height: '50px', background: 'blue'}">
  <template slot="header">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </template>
  ...
</el-table>

5. 最后，您还可以使用el-table-column的属性来自定义每个列的表头。例如，您可以更改每个列的名称、宽度、对齐方式等。例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="Name" width="150"></el-table-column>
  <el-table-column prop="age" label="Age" width="100" align="center"></el-table-column>
  <el-table-column prop="city" label="City" width="200"></el-table-column>
</el-table>

这些是自定义el-table表头的一些基本步骤。您可以根据自己的需求进行更改和调整。