el-table 行合并的实现示例

本文主要介绍了el-table 行合并的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

示例一:单个表格

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

效果:

示例二:循环表格

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

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

效果:

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

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

效果:
同上

来看看前端打印的信息:

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

以上就是el-table 行合并的实现示例的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程