vue表格vxe-table实现表头合并，分组表头自定义合并

在开发后台管理系统时，经常会遇到需要展示复杂表格的场景，其中表头合并（多级表头、不规则合并）是一项常见需求。vxe-table 是一款功能强大的 Vue 表格组件，它不仅支持树形分组表头，还提供了自定义列头合并的功能，允许开发者灵活地将任意单元格进行合并，满足各种复杂的表头设计。
形分组表头 vs 自定义合并表头

vxe-table 默认支持树形分组表头，只需在列配置中定义 children 即可实现多级表头。例如：

1. columns: [
2.   { field: 'name', title: '姓名' },
3.   {
4.     title: '基本信息',
5.     children: [
6.       { field: 'sex', title: '性别' },
7.       { field: 'age', title: '年龄' }
8.     ]
9.   }
10. ]

复制代码

这种方式的优点是简单直观，但只能按层级自动生成表头，无法实现跨层级的任意合并（例如合并第一列的“姓名”和“性别”）。
开启自定义表头合并

定义合并表头则允许我们完全控制表头的每个单元格，通过 mergeHeaderCells 配置将任意位置的单元格合并，实现更灵活的布局。
要使用自定义合并，需要在表格组件上设置两个关键属性：
show-custom-header：开启自定义表头渲染模式。
merge-header-cells：定义合并规则的数组。
mergeHeaderCells 配置详解

行/列索引规则：
行索引从上到下递增，0 表示最顶层的表头行。
列索引从左到右递增，0 表示第一列（通常是序号列或第一列数据列）。
如果存在多级表头，最终渲染的表头行数由列配置的层级深度决定。
例如，合并第一列和第二列（两行高度）的规则为：

1. mergeHeaderCells: [
2.   { row: 0, col: 0, rowspan: 2, colspan: 1 }, // 合并第一列的两行
3.   { row: 0, col: 1, rowspan: 2, colspan: 1 }  // 合并第二列的两行
4. ]

复制代码

代码

1. <template>
2.   
3.     <vxe-button @click="setMerge1">设置合并1</vxe-button>
4.     <vxe-button @click="setMerge2">设置合并2</vxe-button>
5.     <vxe-button status="success" @click="saveMergeData">获取合并规则</vxe-button>
7.     <vxe-grid  ref="gridRef" v-bind="gridOptions"></vxe-grid>
8.   
9. </template>

复制代码

当使用自定义表头合并后，被合并的列将不支持通过拖拽调整列宽。这是因为合并后的单元格在结构上已经不是独立的列，拖拽行为难以精确定义。如果需要调整列宽，建议在合并前规划好列宽，或通过固定宽度配置。
https://vxetable.cn

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！