Vue学习笔记六：element-ui中表格单元格合并（多个if else语句的优化）

最近平台中有一个需求：读取excel文件，并将表格显示在前端。之前我们实现了将一个json数据读取之后放到表格里（直接读取excel也差不多）。实现这个不难，主要是合并单元格有些麻烦，element-ui自己提供了合并行或列的计算方法：span-method，但是首先要处理下合并的单元格数据。

合并前：

合并后：

  

实现步骤简单来说有两步，这里会逐步展开来说，也会说明下每一步最开始的写法，然后一步步优化，消除多个 if else 语句，使代码更加简洁，这个过程中逐步地进行抽象封装。

一、读取数据，并将需要合并单元格的列里面的数据读取出来。

这里需要合并的单元格的列是“大类”“中类”“小类”，主要是判断当前元素与上一元素是否相同，或者当前元素的上一个元素是否非空，相同的话，就加1，表示合并行数加1，0表示该行不显示。 

最终读取出来的这三列里面的值如下，如第一列里面的每一行读取出来是 [28,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6,0,0,0,0,0,0,6,0,0,0,0,0,0]，28表示0-28行合并，15表示从该行开始后的15行合并，6表示从该行开始后的6行合并，6表示从该行开始后的6行合并。

最开始的实现方法代码如下：

虽然成功实现了，但是代码冗余量很多，于是将里面具有相同代码的地方封装进函数，然后将“大类”、“中类”、“小类”做成字典，然后循环这个字典的key，来执行函数，并且把原先的 if 语句替换成三目运算符，如下图所示，代码简洁了很多。

 二、合并单元格方法

根据 span-method 方法返回一个如下数组字典形式：

return {
  rowspan: result.rowspan,
  colspan: result.colspan   
}

最开始实现方法如下：

显然代码的冗余性很多， 可以简洁处理，最后改为如下所示形式：