在开发后台管理系统时经常会遇到需要展示复杂表格的场景其中表头合并多级表头、不规则合并是一项常见需求。vxe-table 是一款功能强大的 Vue 表格组件它不仅支持树形分组表头还提供了自定义列头合并的功能允许开发者灵活地将任意单元格进行合并满足各种复杂的表头设计。形分组表头 vs 自定义合并表头vxe-table 默认支持树形分组表头只需在列配置中定义 children 即可实现多级表头。例如columns:[{field:name,title:姓名},{title:基本信息,children:[{field:sex,title:性别},{field:age,title:年龄}]}]这种方式的优点是简单直观但只能按层级自动生成表头无法实现跨层级的任意合并例如合并第一列的“姓名”和“性别”。开启自定义表头合并定义合并表头则允许我们完全控制表头的每个单元格通过 mergeHeaderCells 配置将任意位置的单元格合并实现更灵活的布局。要使用自定义合并需要在表格组件上设置两个关键属性show-custom-header开启自定义表头渲染模式。merge-header-cells定义合并规则的数组。mergeHeaderCells 配置详解行/列索引规则行索引从上到下递增0 表示最顶层的表头行。列索引从左到右递增0 表示第一列通常是序号列或第一列数据列。如果存在多级表头最终渲染的表头行数由列配置的层级深度决定。例如合并第一列和第二列两行高度的规则为mergeHeaderCells:[{row:0,col:0,rowspan:2,colspan:1},// 合并第一列的两行{row:0,col:1,rowspan:2,colspan:1}// 合并第二列的两行]代码templatedivvxe-buttonclicksetMerge1设置合并1/vxe-buttonvxe-buttonclicksetMerge2设置合并2/vxe-buttonvxe-buttonstatussuccessclicksaveMergeData获取合并规则/vxe-buttonvxe-gridrefgridRefv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{ref,reactive}fromvueconstgridRefref()constgridOptionsreactive({border:true,showCustomHeader:true,height:400,mergeHeaderCells:[{row:0,col:0,rowspan:2,colspan:1},{row:0,col:1,rowspan:2,colspan:1},{row:0,col:2,rowspan:1,colspan:2},{row:0,col:4,rowspan:1,colspan:2},{row:1,col:6,rowspan:1,colspan:2},{row:0,col:8,rowspan:2,colspan:1}],columns:[{type:seq,width:70},{field:name,title:Name},{title:Group1,field:group1,headerAlign:center,children:[{field:sex,title:Sex},{field:age,title:Age}]},{field:group3,title:Group3,headerAlign:center,children:[{field:attr5,title:Attr5},{field:attr6,title:Attr6}]},{field:group6,title:Attr3,children:[{field:attr3,title:Group8,headerAlign:center}]},{field:group8,title:Attr4,children:[{field:attr4,title:Attr4}]},{field:address,title:Address}],data:[{id:10001,name:Test1,role:Develop,sex:Man,age:46,attr3:22,attr4:100,attr5:66,attr6:86,address:Guangzhou},{id:10002,name:Test2,role:Test,sex:Women,age:0,attr3:0,attr4:0,attr5:0,attr6:0,address:Shenzheng},{id:10003,name:Test3,role:PM,sex:Man,age:0,attr3:22,attr4:0,attr5:0,attr6:0,address:Shanghai},{id:10004,name:Test4,role:Designer,sex:Women,age:0,attr3:0,attr4:0,attr5:0,attr6:0,address:Guangzhou},{id:10005,name:Test5,role:Test,sex:Women,age:0,attr3:0,attr4:0,attr5:0,attr6:0,address:Shenzheng},{id:10006,name:Test6,role:Develop,sex:Man,age:0,attr3:0,attr4:0,attr5:0,attr6:0,address:Guangzhou},{id:10007,name:Test7,role:Designer,sex:Women,age:0,attr3:0,attr4:0,attr5:0,attr6:0,address:Guangzhou},{id:10008,name:Test8,role:Test,sex:Man,age:0,attr3:0,attr4:0,attr5:0,attr6:0,address:Guangzhou}]})constsetMerge1(){gridOptions.mergeHeaderCells[{row:0,col:0,rowspan:2,colspan:1},{row:0,col:1,rowspan:2,colspan:1},{row:0,col:2,rowspan:1,colspan:2},{row:0,col:4,rowspan:1,colspan:2},{row:1,col:6,rowspan:1,colspan:2},{row:0,col:8,rowspan:2,colspan:1}]}constsetMerge2(){gridOptions.mergeHeaderCells[{row:0,col:0,rowspan:2,colspan:1},{row:0,col:1,rowspan:2,colspan:1},{row:0,col:2,rowspan:1,colspan:4},{row:1,col:6,rowspan:1,colspan:3}]}constsaveMergeData(){const$gridgridRef.valueif($grid){constmergeList$grid.getMergeHeaderCells()console.log(mergeList)}}/script当使用自定义表头合并后被合并的列将不支持通过拖拽调整列宽。这是因为合并后的单元格在结构上已经不是独立的列拖拽行为难以精确定义。如果需要调整列宽建议在合并前规划好列宽或通过固定宽度配置。https://vxetable.cn