Ant Design of Vue 表格设置表头

Ant Design of Vue (简称Vue-AntD) 中的表格组件 `el-table` 提供了丰富的配置选项，包括设置表头。以下是基本步骤：

1. 首先，在模板文件中引入`<el-table>`组件和其他必要的依赖，如`<el-table-column>`用于创建列。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 表头部分 -->
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      />
      <el-table-column
        prop="age"
        label="年龄"
        width="180"
      />
      <!-- 其他列... -->
    </el-table>
  </div>
</template>

2. 定义数据数组 `tableData`，其中每个元素都包含你要显示在表头属性对应的键值对。例如：

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 },
        //...
      ],
    };
  },
};
</script>

3. 在需要添加自定义样式或功能的列中，你可以进一步定制 `el-table-column` 的属性。比如添加排序、合并单元格等。

如果你需要动态生成表头，可以使用 `v-for` 循环遍历一个对象数组，将对象的属性作为表头标题。例如：

<el-table-column v-for="(headerItem, index) in headers" :key="index" :prop="headerItem.prop" :label="headerItem.label">
  <!-- ... -->
</el-table-column>

这里假设 `headers` 变量是一个包含表头信息的对象数组，如 `{ prop: 'name', label: '姓名' }`。