当前位置：首页 > VUE

vue实现表格多表头

2026-01-20 02:08:36VUE

Vue 实现表格多表头的方法

在 Vue 中实现多表头表格通常需要结合第三方表格组件或自定义渲染逻辑。以下是几种常见的实现方式：

使用 Element UI 的表格组件

Element UI 的 el-table 组件支持多级表头配置，通过嵌套 el-table-column 实现：

<el-table :data="tableData">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column label="配送信息">
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="地址">
      <el-table-column prop="province" label="省份" width="180"></el-table-column>
      <el-table-column prop="city" label="城市" width="180"></el-table-column>
    </el-table-column>
  </el-table-column>
</el-table>

使用 Ant Design Vue 的表格组件

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

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '其他信息',
    children: [
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '地址',
        children: [
          {
            title: '街道',
            dataIndex: 'street',
            key: 'street',
          },
          {
            title: '城市',
            dataIndex: 'city',
            key: 'city',
          },
        ],
      },
    ],
  },
];

自定义渲染多表头

如果需要更灵活的控制，可以手动实现表头渲染：

<table>
  <thead>
    <tr>
      <th rowspan="2">日期</th>
      <th colspan="2">配送信息</th>
    </tr>
    <tr>
      <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.address }}</td>
    </tr>
  </tbody>
</table>

使用 VxeTable 高级表格组件

VxeTable 提供了更强大的多表头支持：

const columns = [
  { field: 'id', title: 'ID' },
  {
    title: '基本信息',
    children: [
      { field: 'name', title: '姓名' },
      { field: 'age', title: '年龄' }
    ]
  },
  {
    title: '其他信息',
    children: [
      { field: 'address', title: '地址' },
      { field: 'phone', title: '电话' }
    ]
  }
]

动态生成多表头

对于动态表头需求，可以通过计算属性生成表头结构：

vue实现表格多表头

computed: {
  dynamicColumns() {
    return [
      { title: '固定列', dataIndex: 'fixed' },
      ...this.headerGroups.map(group => ({
        title: group.name,
        children: group.fields.map(field => ({
          title: field.label,
          dataIndex: field.key
        }))
      }))
    ]
  }
}

每种方法适用于不同场景，Element UI 和 Ant Design Vue 适合快速开发，自定义方案灵活性最高，VxeTable 则提供了更丰富的企业级功能。