elementui table合并行（el-table表格动态合并行及合并行列实例详解）

前言

在写项目的时候有时候会经常遇到把行和列合并起来的情况  
  
  
  
  
  
 ，因为有些数据是重复渲染的 
  
  
  
  
  
 ，不合并行列会使表格看起来非常的混乱


 


 


 


 


 


 
，如下：

而我们想要的数据是下面这种情况 
 
 
 
 
 
，将重复的行进行合并  
   
   
   
   
   
  ，使表格看起来简单明了

 

 

 

 

 

 
，如下：

1            、合并行

所谓的合并行就是将多行相同的数据变成一行来显示
 

 

 

 

 

 
，直接上代码             ，页面的布局比较简单

span-method是el-table上属性
 

 
 

 
 

 
 

 
 

 
 

 
，其值是一个函数











，objectSpanMethod方法是用来处理合并行的返回值                   ，tableData数据如下：

首先需要对数据就行处理
 
 
 
 
 
 
 
 
 
 
 
 
，就是比较当前行与上一行的值是否相等（如果是第一行数据

















，直接将值赋值为1）

在mounted中调用数据初始化数据的方法             ，如下：

数据处理好之后就可以调用objectSpanMethod方法了











，如下：

合并后的结果就是我们想要的形式：

合并行完整的代码如下：

2 
 
  
 
  
 
  
 
  
 
  
 
  、合并行列

调整下数据 
  
  
  
  
  
 ，如下：

可以看到上面的数据多了一行总成绩


 


 


 


 


 


 
，现在的数据在页面显示效果如下：

可以看到总成绩的三个列并没有合并 
 
 
 
 
 
，并不是我们想要的效果  
   
   
   
   
   
  ，所以需要换一种思路来处理数据

页面的布局也有所调整

 

 

 

 

 

 
，如下：

tableData中的数据就是上面调整后的
 

 

 

 

 

 
，还需要声明的变量如下：

首先也需要处理数据             ，在mounted中调用数据初始化数据的方法
 

 
 

 
 

 
 

 
 

 
 

 
，如下：

数据处理好之后就可以调用objectSpanMethods方法了











，如下：

实现的效果图如下：

合并行列的完整代码如下：

如果用不想合并的行需要在colConfigs中调整                   ，如下：

效果图如下：

如果想要合并
 
 
 
 
 
 
 
 
 
 
 
 
，需要在mergeCols中添加数据

















，如下：

新添加的属性合并后效果图如下：

以上就是el-table表格合并行列的内容             ，有不懂的地方欢迎留言讨论~

总结

到此这篇关于el-table表格动态合并行及合并行列的文章就介绍到这了,更多相关el-table表格动态合并行列内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！