el-table 行合并的实现示例_vue.js_

页面实现行合并的情况还是比较常见的，但实现起来却有一点点难。官网的例子有，不过人家的合并逻辑是从第一行开始两行两行合并，不能根据数据动态合并，感觉参考意义不太大。实际需求一般都是根据表数据动态来进行合并的，也会有更复杂的情况，比如循环表格的。

以下的例子中，表格数据是放在页面的假数据，hbxh 值相同时，表示需要合并

示例一：单个表格

单个表格的比较简单，知道合并方法的使用基本就好弄了

效果：

示例二：循环表格

循环表格时，需要在表的每行数据传入一个值，代表是第几个表格，方便合并方法使用

有循环的需求时，数据结构会比较复杂，需要耐心理清数据之间的关系

效果：

合并的关键主要就是要准确计算出每行记录的合并数，计算逻辑可能每个人会想得不太一样，以上的栗子仅代表一种实现方式，不同方式的朋友可以留言讨论

>>>>>>>>>今天又发现了一种新的逻辑>>>>>>>>>>>>>(2021-11-29)

效果：
同上

来看看前端打印的信息：

 到此这篇关于el-table 行合并的实现示例的文章就介绍到这了,更多相关el-table 行合并内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！