vue多级表头如何实现

多级表头实现方法

使用 el-table 的 el-table-column 嵌套方式可以轻松实现多级表头。通过嵌套多个 el-table-column 组件，每个列可以拥有自己的子列，从而形成层级结构。

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

动态生成多级表头

当表头数据来自后端或需要动态生成时，可以使用递归组件或循环渲染。定义一个包含 children 属性的表头配置数组，通过递归渲染实现多级表头。

const columns = [
  { prop: 'date', label: '日期' },
  { 
    label: '配送信息',
    children: [
      { prop: 'name', label: '姓名' },
      { 
        label: '地址',
        children: [
          { prop: 'province', label: '省份' },
          { prop: 'city', label: '市区' },
          { prop: 'address', label: '详细地址' }
        ]
      }
    ]
  }
]

<el-table :data="tableData">
  <template v-for="col in columns">
    <el-table-column 
      v-if="!col.children" 
      :key="col.prop" 
      :prop="col.prop" 
      :label="col.label">
    </el-table-column>
    <el-table-column v-else :key="col.label" :label="col.label">
      <template v-for="child in col.children">
        <el-table-column 
          v-if="!child.children" 
          :key="child.prop" 
          :prop="child.prop" 
          :label="child.label">
        </el-table-column>
        <el-table-column v-else :key="child.label" :label="child.label">
          <!-- 可以继续嵌套递归 -->
        </el-table-column>
      </template>
    </el-table-column>
  </template>
</el-table>

合并表头单元格

对于需要横向合并的表头单元格，可以通过设置 colspan 和 rowspan 实现。在 header-cell-style 或 header-cell-class 中动态计算合并规则。

methods: {
  headerCellStyle({ row, column, rowIndex, columnIndex }) {
    if (rowIndex === 0 && columnIndex === 1) {
      return { display: 'none' } // 隐藏某个表头单元格
    }
    if (rowIndex === 1 && columnIndex === 0) {
      return { colspan: 3 } // 横向合并
    }
  }
}

响应式表头处理

当表格宽度不足时，多级表头可能会出现布局问题。可以通过设置 table-layout 为 fixed 并定义列宽来确保布局稳定。

<el-table :data="tableData" style="width: 100%" :table-layout="fixed">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column label="配送信息" width="300">
    <!-- 子列 -->
  </el-table-column>
</el-table>

表头样式自定义

通过 header-cell-class-name 或 header-cell-style 可以自定义表头样式。对于多级表头，可能需要针对不同层级设置不同样式。

<el-table 
  :data="tableData" 
  :header-cell-class-name="headerCellClass">
</el-table>

methods: {
  headerCellClass({ row, column, rowIndex }) {
    if (rowIndex === 0) return 'first-level-header'
    if (rowIndex === 1) return 'second-level-header'
  }
}

.first-level-header {
  background-color: #f5f7fa;
  font-weight: bold;
}
.second-level-header {
  background-color: #e6e6e6;
}