el-table自定义表头

在 Element Plus 中，el-table 组件的表头默认由 el-table-column 来定义。要自定义表格头部的内容，可以通过以下几种方式来实现：

1. 使用 slot 自定义表头内容

可以使用 header 插槽来自定义列的表头内容。

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="name"
      label="Name"
      :sortable="true"
    >
      <template #header>
        <span>自定义表头内容</span>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  { name: 'John', age: 30 },
  { name: 'Alice', age: 25 },
]);
</script>

在这个例子中，el-table-column 的 header 插槽被用来替换默认的表头。

2. 使用 label 动态设置列的表头

label 属性用于定义表头文本。如果你需要动态显示表头内容，可以通过绑定表达式来动态修改 label。

<template>
  <el-table :data="tableData">
    <el-table-column
      :label="headerLabel"
      prop="name"
    />
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  { name: 'John', age: 30 },
  { name: 'Alice', age: 25 },
]);

const headerLabel = ref('Name'); // 你可以通过修改 headerLabel 来改变表头内容
</script>

3. 使用 header-align 属性设置表头对齐方式

如果你只是想改变表头的对齐方式，可以使用 header-align 属性。

<el-table :data="tableData">
  <el-table-column
    label="Name"
    prop="name"
    header-align="center"  <!-- 表头内容居中对齐 -->
  />
</el-table>
</el-table>

4. 使用 scoped slots 自定义表头和单元格

如果你需要更复杂的自定义内容，scoped slots 提供了更强大的灵活性，可以通过 #header 插槽和 #default 插槽来完全控制表头和表格内容。

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="name"
      :label="headerLabel"
    >
      <template #header>
        <div style="color: red; font-weight: bold;">自定义表头</div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  { name: 'John', age: 30 },
  { name: 'Alice', age: 25 },
]);

const headerLabel = ref('Name');
</script>