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

16 篇文章 1 订阅

最近平台中有一个需求:读取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   
}

最开始实现方法如下:

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

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值