elementUI合并单元格

本文章所说的横跨就是包括横跨和竖跨  就是字面意思

长期写后台，遇到过很多次合并单元格的需求，每次都是csdn直接抄代码，今天提需求又碰到合并单元格了，趁着有时间就想一想elementUI这个功能到底怎么使用。

首先看到elementui中的例子，就是就是：span-method='arraySpanMethod' 就是传递一个合并的方法函数，看着挺简单的，一写就发现不对劲了。至少我一写就把自己绕里了！先看文档！

arraySpanMethod根据文档描述就是为了返回一个数组或者是对象，其实对应的就是原生html元素中td标签的rowspan和colspan属性。那么这里就出现了html table标签配套使用的td标签的用法了，查看w3c教程知道是负责当前单元格横跨单元格数量的属性。记住是横跨不是覆盖，相应的横跨的区域中就不能存在td标签。是不是糊涂了？ 上代码

    
    



    

        
月份
        
支出
        
收入
    
    

        
一月
        
500
        
2000
    

    

        
二月
        
600
        
2000
    
    

        
三月
        
1000
        
3000
    
    

        
四月
        
500
        
2500
    

发现一月的收入和二月的收入是同样的，这样就可以合并了，我们来改造一下代码

 

        月份
        支出
        收入
    
    
        一月
        500
        2000    


    

    
        二月
        600
         
    
    
        三月
        1000
        3000
    
    
        四月
        500
        2500
    

 

 成功了，跟着列子我们就能够直观的感受到rowspan属性的作用，就是：横跨2行。相对应的横跨的元素就没有了，所以注释上了，如果不注释，你想想会怎么样呢。

colspan作用的同样的，让我们梳理一下，如果是两行之间的东西要合并，就是rowspan 至于你想合并多少就是设定的值，一行中的两列要进行合并就是colspan，其实我并不喜欢用合并这个概念。我感觉就是用横跨要好一点，毕竟横跨的位置已经没有元素了。就不能叫合并了。重点就是横跨属性后面跟着的是数量。

根据上面的列子你如果想的更远一点，就会发现一个问题，用elementui table表格是把所有的单元格都渲染出来了，怎么控制单元格不渲染呢？嘿嘿，还记得arraySpanMethod函数吗？如果该函数返回的数据是[0,0] 就不会渲染出表格来了。这是elementui的厉害之处了。

刚才也提到了，arraySpanMethod函数对应的返回值就是tr表格的 rowspan和colspan属性。

 

 我没有骗你吧，我看过其他的文章，有说的arraySpanMethod函数是返回对应的索引，根据上面的tr元素的rowspan和colspan属性的解释，你应该明白其实是横跨的个数了吧。

好了，其实到这里已经弄明白他的原理了。很简单是不是，但是还有一些注意的点。

横跨这个规则是以起点向外扩散的，可以把表格的左上角当做坐标轴，如果你想x轴横跨就是列合并嘛，那么只能是向右，不能向左，y轴横跨就是行合并，只能向下，不能向上，我一开始测试着写的时候就是犯了这个错误。我想在最后一行最后一列去横跨到第一行的最后一列。大家注意。

还有就是如果横跨了，相对应的被横跨的表格一定要设置[0,0],这样这个被横跨的表格就不会渲染出td元素。不然的话就会出现td元素依然存在，横跨也存在，就会出现宽度和高度的问题。这不是bug。顺便贴出一下我随便测试的合并方法。

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex)
      if (column.label === '创建时间') {
        if (rowIndex === 0) {
          return [3, 1]
        } else if (rowIndex <= 2) {
          return [0, 0]
        } else if (rowIndex === 4) {
          return [2, 1]
        } else if (rowIndex > 4) {
          return [0, 0]
        }
      }
    },

如果你能看懂，那么就说明这块原理你弄明白了。当然你也可以找我要注释。嘿嘿