vue实现多级表头

实现多级表头的核心方法

在Vue中实现多级表头通常需要结合el-table（Element UI）或自定义表格组件。以下是两种主流实现方式：

使用Element UI的el-table

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

<el-table :data="tableData">
  <el-table-column label="一级表头">
    <el-table-column label="二级表头-A" prop="propA"></el-table-column>
    <el-table-column label="二级表头-B">
      <el-table-column label="三级表头-B1" prop="propB1"></el-table-column>
      <el-table-column label="三级表头-B2" prop="propB2"></el-table-column>
    </el-table-column>
  </el-table-column>
</el-table>

动态生成多级表头

当表头数据需要动态生成时，可以使用递归组件：

// 递归组件
Vue.component('multi-header', {
  props: ['columns'],
  template: `
    <el-table-column v-for="col in columns" :label="col.label" :key="col.prop">
      <template v-if="col.children">
        <multi-header :columns="col.children"></multi-header>
      </template>
      <template v-else>
        <span>{{ col.label }}</span>
      </template>
    </el-table-column>
  `
});

数据结构设计

动态表头通常需要嵌套数据结构：

tableColumns: [
  {
    label: '一级表头',
    children: [
      { label: '二级A', prop: 'a' },
      { 
        label: '二级B',
        children: [
          { label: '三级B1', prop: 'b1' },
          { label: '三级B2', prop: 'b2' }
        ]
      }
    ]
  }
]

自定义渲染方案

如果需要完全自定义表头样式，可以结合render函数：

columns: [
  {
    label: '复合表头',
    renderHeader: (h) => {
      return h('div', [
        h('div', '主标题'),
        h('div', { style: { color: '#999' }}, '副标题')
      ])
    }
  }
]

合并单元格处理

多级表头常需要处理单元格合并，可通过span-method实现：

methods: {
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    if (rowIndex % 2 === 0) {
      if (columnIndex === 0) {
        return [1, 2];
      } else if (columnIndex === 1) {
        return [0, 0];
      }
    }
  }
}

响应式适配技巧

针对不同屏幕尺寸，建议添加表头自适应逻辑：

.el-table__header-wrapper {
  overflow-x: auto;
  white-space: nowrap;
}
.el-table__body-wrapper {
  overflow-x: hidden;
}

性能优化建议

当表头层级超过3级时，建议：

• 使用虚拟滚动避免DOM过多
• 冻结固定列时使用fixed属性
• 复杂表头考虑分拆为多个表格组合

以上方案可根据实际项目需求组合使用，Element UI方案适合快速实现，递归组件方案更适合动态数据结构，自定义渲染则能满足特殊UI需求。