当前位置：首页 > VUE

vue实现多级表头展示

2026-01-23 06:33:40VUE

Vue实现多级表头的方法

使用el-table组件结合嵌套表头配置可以实现多级表头展示。通过el-table-column的嵌套结构定义层级关系。

<template>
  <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="详细地址"></el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

动态生成多级表头

当表头数据需要从后端获取时，可以使用递归组件实现动态渲染。

vue实现多级表头展示

<template>
  <el-table :data="tableData">
    <multi-header :columns="headerColumns"></multi-header>
  </el-table>
</template>

<script>
import MultiHeader from './MultiHeader.vue'

export default {
  components: { MultiHeader },
  data() {
    return {
      headerColumns: [
        { prop: 'date', label: '日期' },
        { 
          label: '配送信息',
          children: [
            { prop: 'name', label: '姓名' },
            { 
              label: '地址',
              children: [
                { prop: 'province', label: '省份' },
                { prop: 'city', label: '市区' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

递归组件实现

创建MultiHeader.vue组件处理嵌套表头：

vue实现多级表头展示

<template>
  <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">
      <multi-header :columns="col.children"></multi-header>
    </el-table-column>
  </template>
</template>

<script>
export default {
  name: 'MultiHeader',
  props: {
    columns: Array
  }
}
</script>

合并表头单元格

对于需要横向合并的表头，可以使用colspan属性配合自定义表头渲染。

<el-table-column label="操作" width="180">
  <template #header>
    <div style="text-align: center">操作</div>
  </template>
  <template #default="{row}">
    <el-button size="mini">编辑</el-button>
    <el-button size="mini" type="danger">删除</el-button>
  </template>
</el-table-column>

样式调整技巧

多级表头可能需要调整样式以保证显示效果：

/* 表头行高调整 */
.el-table__header tr {
  line-height: 30px;
}

/* 表头边框调整 */
.el-table__header th {
  border-right: 1px solid #ebeef5;
}

/* 表头文字居中 */
.el-table__header .cell {
  text-align: center;
}