vxe-grid 表格头标题设置及内容合并列项

最新推荐文章于 2024-08-19 11:34:55 发布

onlylele

最新推荐文章于 2024-08-19 11:34:55 发布

阅读量2k

点赞数

分类专栏： AntDesignVue 和 vxe-table 文章标签： vue.js 前端 vxe-grid

本文链接：https://blog.csdn.net/onlylele/article/details/130400375

版权

本文介绍了如何在 vxe-grid 中自定义表格表头标题并实现内容列的合并。通过两种不同的代码设置方式，详细展示了在 Vue.js 前端项目的实际操作过程。

摘要由CSDN通过智能技术生成

1、vxe-grid 表格的高级使用：自定义表格表头标题动态添加，内容列有合并项；实现效果如下所示：

2、vxe-grid 代码部分设置，实现合并有两种方式可以根据情况自由选定合并方式，代码如下；

 <!--   :span-method="mergeRowMethod"  -->
<vxe-grid
            border
            ref="xGrid" 
            class="moz-style taskTable"
            row-class-name="my-vxe-table-row"
            resizable 
            :scroll-x="{enable: true}"
            :scroll-y="{enable: true}"
            :scrollToLeftOnChange="false" 
            :max-height="600"
            :loading="table.loading"  
            :columns="table.columns" 
            :data="table.dataSource"  
            :edit-config="tabl