element 动态合并表格

element官网的合并仅限于简单的有规律的合并

需求: 将动态传入列的名称,实现该列相同的数据自动合并

初始图

 效果图

当然还会出现一定的其他需求,比如只允许第一列的值相同的情况下才允许第二列以及之后的列进行合并,这个需求在这次分享中并未体现,有需要的可以期待下一章(element 动态合并表格--进阶)

进阶实现的效果类似如下图:

tips: 如果采用这次的函数就会导致状态那一栏的已完成全部合并

若想实现当前者相同时才允许后者的相同值实现合并,则参考进阶写法

代码实现了采用html内嵌vue.js + element-ui

  1 
  2 
  3 
  4 
  5     
  6     
  7     
  8 
  9 

 10     
 11         
 12         
 13         
 14         
 15         
 16         
 17     
 18 
 19 
 20 
 21     
 22     
 23     
 24     
 25     
 26     
114 
115 
116 

函数解释

mergeTableRow就是合并代码的核心函数,他会将数据进行处理,处理成为符合objectSpanMethod实现表格合并的函数
入参:

　　data:    入参类型: 数组      入参描述: 需要处理的数据 　　 　　merge: 入参类型: 数组      入参描述: 需要合并的行的数组prop(对应列内容的字段名) 　　 　例如:  　　this.mergeTableRow(dataArr, ["checkRoom", "checkProject"])