1.例

vxe-colgroup分组完成，需要实现两个合并合并成一行

基础合并完成

2.实现思路 

        由于表头字段固定，在进行vxe-colgroup分组合并，实现基础的表头合并；组件库官网对于表头合并并没有方法；

1.官网API知可以给对应的表头单元格2添加类名；

header-class-name="custom-span"

2. 单元格1不添加title表明提示，处于空的状态；

3.通过定位的方式与/deep/穿透文字对应的样式，进行绝对定位，定位到合并对应的位置；

本质上单元格没有进行合并，只是通过定位以及文字区域的背景颜色设置一样覆盖，给用户视觉上产生两个单元格已经合并了的错觉；

3.代码

html

<vxe-column field="key" title="收入" min-width="100" align="center"></vxe-column>
                <vxe-colgroup>
                    <vxe-colgroup align="center" title="合并" header-class-name="custom-span">
                        <vxe-colgroup title="one" field="expendType" align="center" min-width="100">
                            <vxe-colgroup title="two" field="expendType" align="center" min-width="100">
                                <vxe-column title="three" field="expendType" min-width="100" align="center"></vxe-column>
                            </vxe-colgroup>
                        </vxe-colgroup>
                    </vxe-colgroup>
                </vxe-colgroup>
<vxe-colgroup title="year" align="center">
                    <vxe-colgroup align="center" field="sex" title="合计" min-width="100">
                        <vxe-colgroup align="center" field="num" title="42" min-width="100">
                            <vxe-colgroup align="center" field="num" title="0" min-width="100">
                                <vxe-column align="center" field="num" title="0" min-width="100"></vxe-column>
                            </vxe-colgroup>
                        </vxe-colgroup>
                    </vxe-colgroup>
                    <vxe-colgroup align="center" :title="item.date" :field="item.date" v-for="item in monthDataTable" :key="item.date" height="30" min-width="80">
                        <vxe-colgroup align="center" field="num" title="0" min-width="100">
                            <vxe-colgroup align="center" field="num" title="0" min-width="100">
                                <vxe-column align="center" field="num" title="0" min-width="100"></vxe-column>
                            </vxe-colgroup>
                        </vxe-colgroup>
                    </vxe-colgroup>

script

 // 月的默认数据
            monthDataTable: [
                {date: "M1", },
                {date: "M2",},
                {date: "M3",},
                {date: "M4",},
            ],

css定位

<style scoped lang="less">
/deep/.vxe-header--row{
    height: 35px !important;
    padding:0 !important;
}
// 表格单元格高度
/deep/.vxe-body--column{
    height: 35px !important;
}
/deep/.custom-span .vxe-cell .vxe-cell--title{
    width: 99% !important;
    position: absolute !important;
    background-color: rgb(244, 246, 251) !important;
    bottom: 38px !important;
    left: 0 !important;
}
</style>