element-ui单元格合并问题

论表格的话写过很多，不过之前写的都是简单的表格，也从来不用什么ui库，纯原生开发，因内心坚信VUE的发展React的跨度又跳槽到一家VUE的公司，我们组主要做公司的内部管理系统，所以会涉及到很多表格，Element这个表格真的是....

话不多说，直接上正文：

关于element表格合并的问题，本文介绍关于列的合并，其实只要缕清思路没啥特别困难的，先简单的介绍一下思路。

后台给的数据大部分是不能直接用的，除非你和后台有非常好的关系，当然一己之私我相信别人也不会按你的格式写的，首先像这种合并列的一有一级两级三级（你可以理解为一个List两个List...），不管他有几个集合，都给他遍历出来，因为你想用element只能遍历，其实就是重中之重，一般每一条数据都会附带一个id，而id是唯一的，但是没有id的情况下怎么办，其实很简单，循环外定义一个变量，哪层合并在哪层++（如果有重复的id也可以采取这种办法，因为有时候后台的话不能信，听听就行），例如：

我讲的都是大白话，相信各位都可以听得懂，这个变量是我要合并那层的处理。

接下来的逻辑就是将刚刚遍历完的集合继续循环，找不同，如果是相同的就给他合并了，

mergeComon(id,rowIndex){
                var idName=this.tableData[rowIndex][id];
                if(rowIndex>0){
                  if(this.tableData[rowIndex][id] != this.tableData[rowIndex-1][id]){
                    var i = rowIndex,num = 0;
                    while(i<this.tableData.length){
                      if(this.tableData[i][id] === idName){
                        i++;
                        num++;
                      }else{
                        i=this.tableData.length
                      }
                    }
                    return {
                      rowspan:num,
                      colspan:1
                    }
                  }else{
                    return{
                      rowspan:0,
                      colspan:1
                    }
                  }
                }else{
                  var i = rowIndex,num = 0;
                  while(i<this.tableData.length){
                    if(this.tableData[i][id] === idName){
                      i++;
                      num++;
                    }else{
                      i=this.tableData.length
                    }
                  }
                  return {
                    rowspan:num,
                    colspan:1
                  }
                }
            }
}

以上函数是公共的，只要你会copy，可以拿去直接用，其实还可以深度优化。

参数介绍：

id：就是刚刚找的那个相同的或者不同的即将要合并的那个id。

rowIndex：看下文。

紧接着就是element表格合并的函数了，

objectSpanMethod({ row, column, rowIndex, columnIndex }){
              switch(columnIndex){
              	  case 0:
              	  return this.mergeComon('rsId',rowIndex);
                  case 1:
                  return this.mergeComon('eiId',rowIndex);
                  break;
                  case 2:
                  return this.mergeComon('screen',rowIndex);
                }
            },

我给他稍微做了下处理，因为合并的单元格比较多，所以...（rowIndex看此处）。

大工告成。

其实看不懂也没关系，这儿的思路我也是屡了好久，确实挺乱的，用一次看一次，索性给他封装出来，日后直接调用就行。

作为在读的你只需要（copy/copy/copy）

依旧老样子，不喜勿喷，写给需要的人看。