el-table 自定义列头

您可以通过使用 `el-table` 组件的 `slot` 来自定义列头。在 `el-table` 中，每个列都有一个名为 `header-slot` 的插槽，您可以在该插槽中放置自定义的列头内容。

以下是一个示例，展示了如何使用 `header-slot` 来自定义列头：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name">
      <template slot="header-slot" slot-scope="scope">
        <!-- 自定义列头内容 -->
        <span>{{ scope.column.label }}</span>
        <el-tooltip effect="dark" :content="scope.column.tooltip" placement="top">
          <i class="el-icon-question"></i>
        </el-tooltip>
      </template>
    </el-table-column>
    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 28 },
        { name: 'Jane', age: 32 },
        // 数据...
      ]
    };
  }
};
</script>

在上述示例中，我们使用了 `header-slot` 插槽来自定义了列头的内容。在插槽模板中，我们可以通过 `scope.column` 来访问当前列的属性，例如 `label`（列标题）和 `tooltip`（提示文本）。

您可以根据自己的需求在 `header-slot` 中编写自定义的 HTML 和样式来展示列头。