当前位置：首页 > VUE

vue实现多行表头

2026-02-19 04:13:20VUE

Vue 实现多行表头的方法

在 Vue 中实现多行表头通常可以通过自定义表格组件或使用现有 UI 库（如 Element UI、Ant Design Vue）来完成。以下是几种常见的方法：

使用 Element UI 的多级表头

Element UI 的 el-table 组件原生支持多级表头，通过嵌套 el-table-column 即可实现。

<el-table :data="tableData">
  <el-table-column prop="date" label="日期" width="150"></el-table-column>
  <el-table-column label="配送信息">
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column label="地址">
      <el-table-column prop="province" label="省份" width="120"></el-table-column>
      <el-table-column prop="city" label="市区" width="120"></el-table-column>
      <el-table-column prop="address" label="详细地址" width="300"></el-table-column>
    </el-table-column>
  </el-table-column>
</el-table>

自定义表格组件实现多行表头

如果需要更灵活的控制，可以手动实现多行表头。通过组合 th 和 rowspan/colspan 属性实现。

<table>
  <thead>
    <tr>
      <th rowspan="2">日期</th>
      <th colspan="3">配送信息</th>
    </tr>
    <tr>
      <th>姓名</th>
      <th>省份</th>
      <th>详细地址</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in tableData" :key="item.id">
      <td>{{ item.date }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.province }}</td>
      <td>{{ item.address }}</td>
    </tr>
  </tbody>
</table>

使用 Ant Design Vue 的多级表头

Ant Design Vue 的 a-table 组件也支持多级表头，通过 columns 配置实现。

const columns = [
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
  },
  {
    title: '配送信息',
    children: [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '地址',
        children: [
          {
            title: '省份',
            dataIndex: 'province',
            key: 'province',
          },
          {
            title: '详细地址',
            dataIndex: 'address',
            key: 'address',
          },
        ],
      },
    ],
  },
];

动态生成多行表头

如果需要根据数据动态生成多行表头，可以通过计算属性或方法动态构建表头结构。

computed: {
  dynamicColumns() {
    return [
      {
        title: '日期',
        dataIndex: 'date',
        key: 'date',
      },
      {
        title: '配送信息',
        children: this.getAddressColumns(),
      },
    ];
  }
},
methods: {
  getAddressColumns() {
    return [
      { title: '姓名', dataIndex: 'name', key: 'name' },
      { title: '省份', dataIndex: 'province', key: 'province' },
    ];
  }
}

以上方法可以根据具体需求选择使用，Element UI 和 Ant Design Vue 提供了开箱即用的多级表头支持，而自定义表格组件则适合需要高度定制化的场景。

vue实现多行表头