0
点赞
收藏
分享

微信扫一扫

记录:vxe-table实现分组后的表头合并

小铺有酒一两不够 2022-04-14 阅读 198
前端vue.js

需求

在合并单元格的基础上,去合并部分表头内容。

示例

合并前:
在这里插入图片描述
合并后:在这里插入图片描述

方案

参考方案: >>>vxe-table实现分组后的表头合并<<<,感谢大佬提供思路。

实现代码

	<vxe-table
          border
          align="center"
          :data="list">
          <vxe-colgroup title="合并" header-class-name="custom-span">
            <vxe-column field="1" header-class-name="hidden-cell"></vxe-column>
            <vxe-column field="2" header-class-name="hidden-cell"></vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="合并">
            <vxe-column field="3" title="列1"></vxe-column>
            <vxe-column field="4" title="列2"></vxe-column>
            <vxe-column field="5" title="列3"></vxe-column>
          </vxe-colgroup>
        </vxe-table>
 data() {
    return {
	  list: [
        {
          1: '张三',
          2: '李四',
          3: '王五',
          4: '赵六',
          5: '刘七',
        }
      ]
    }
 ),
  mounted() {
    this.$nextTick(() => {
      document.querySelector('.custom-span').setAttribute('rowspan', '2');
    })
  }
<style scoped>
	.hidden-cell {
	  display: none;
	}
</style>
举报

相关推荐

0 条评论