在对vxetable 进行二次封装的时候，多级表头也是需要考虑进去的，所以需要封装一个递归列组件进行多级表头的一个渲染。
// my-table.vue
<vxe-tableref="xTable":key="currentKey":data="pageData?.list || []"show-header-overflow="tooltip"show-overflow="tooltip"border="inner":row-style="rowStyle"@current-change="onCurrentChange"><!-- 普通列 --><template v-for="(tOptions) of tableNormalOptions" :key="tOptions.prop"><!-- 单表头 --><vxe-columnv-if="!tOptions.child || tOptions.child?.length===0":title="tOptions.showName":field="tOptions.uniqueKey":width="tOptions.width ? tOptions.width : ''":min-width="tOptions.minWidth ? tOptions.minWidth : '100'":header-align="tOptions.headerAlign ? tOptions.headerAlign : 'center'":align="tOptions.align ? tOptions.align : 'center'":fixed="tOptions.fixed ? tOptions.fixed : ''":sortable="tOptions.sortable ? true : false":sort-by="tOptions.sortable ? tOptions.sortBy : ''":resizable="tOptions.resizable !== null ? tOptions.resizable : true":visible="tOptions.visible !== null ? tOptions.visible : false":filters="tOptions.filters"><!-- 自定义列内容格式 --><template v-if="tOptions.slot" #default="scope"><t-buttonclass="hyperlink-button":text="`${isNoVal(scope.row[tOptions.uniqueKey])}`"type="text"@click="openNewWindow(tOptions.uniqueKey)"></t-button></template><!-- 默认展示格式(此处做了判空处理, 如果为空, 则展示小短横线) --><template v-else #default="scope">{{ `${isNoVal(scope.row[tOptions.uniqueKey])}` }}</template></vxe-column><!-- 多表头 --><cross-table-vxe-colgroupv-else:data="tOptions":all-sheet-resources="allSheetResources"></cross-table-vxe-colgroup></template></vxe-table>// cross-table-vxe-colgroup.vue
<template><vxe-colgroup:title="data.name":header-align="data?.headAlign||'center'"><templatev-for="item in data.child":key="item.prop"><vxe-columnv-if="!item.child || item.child?.length ===0":title="item.name":field="item.uniqueKey":width="item.width ? item.width : ''":min-width="item.minWidth ? item.minWidth : '100'":header-align="item.headerAlign ? item.headerAlign : 'center'":align="item.align ? item.align : 'center'":fixed="item.fixed ? item.fixed : ''":sortable="item.sortable ? true : false":sort-by="item.sortable ? item.sortBy : ''":resizable="item.resizable ? item.resizable : false":visible="item.visible !== null ? item.visible : false":filters="item.filters"><!-- 默认展示格式(此处做了判空处理, 如果为空, 则展示小短横线) --><template #default="scope">{{ scope.row[item.uniqueKey]}</template></vxe-column><cross-table-vxe-colgroup v-else :data="item"></cross-table-vxe-colgroup></template></vxe-colgroup>
</template>
