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>