复杂表格难点

在项目开发的过程中，遇到了一个比较复杂的表格问题，项目是用vue2+element-ui所发开的，先上图！

数据都是假的，然后一些敏感数据也打码了，表格是一个这样的表格，本人第一次看到这个项目原型的时候，第一个感觉，这不就是一个普通的element表格嘛？其实不然，简单分析一下这个表格：首先结构上表格表头第一列和第二列合并，表格内容td是每三行进行一个合并。

我们从element-ui中提供的案例里面可以看到有个表格合并的小demo：

这个demo是表格内容的两行进行合并，但是这边没有提供一个表格合并，于是我们可以先把表格内容合并先处理好，我是这样处理的：

首先element的这个合并提供了一些方法，先阅读一下：

通过这段文字的描述，我们可以在表格里传入一个span-method的方法去进行合并

对于这个方法，我主要是做了一个跨行的处理，代码如下：

我们只需要结构出当前行号和当前列号就行了，当前行和当前列我们在这里用不上。因为我们这边是表格左侧第一列需要跨行，所有先判断当前列号是否为0，为0就是第一列，然后再去判断当前行号是否能取到三行，如果可以的话，就return rowspan为3，colspan为1，意思是当前行占了三行，当前列只占了一列，如果不能取到三行的话，我们就让它消失，return一个rowspan和colspan都为0的对象就行了。这样跨行就做好了。

而表头跨列主要是利用了element-ui表格中header-cell-style这个属性：

让它配合多级表头去处理的，这里我主要只用了一个二级表头

我的代码主要是这样的

我们需要一个二级表头，比如上方element提供的多级表头案例，我们只保留红色框里面的内容，然后让绿色框里面的内容全部不可见，就能实现一个表头垮列的效果。

通过前面说到的header-cell-style属性绑定一个theadSpan方法，让其表头的子标题进行一个不显示，我是直接通过控制它的css来实现的，当表头行号rowIndex为1的时候，代表子表头，然后让它不显示。

现在表格的基本结构就搭建完成了，剩下的就是渲染数据，这也是这里面最难的地方。

后端给出的数据结构

这个是通过调用接口，拿到的后端给的部分数据，数据结构是一个对象里面包含两个数组，一个是表格内容的，里面以月份为一个大对象，每个月是一个大的对象，我这里只给出了一部分，完整数据太长了，然后第二个数组是表头数组，通过这个数据去渲染表格。

这个数据结构并不是我们想要的，我们希望是一个departName能绑定的值是：营收金额、报告份数以及辅助单位，这样的数据结构，我们才能通过prop直接绑定到表头上，让它一次性直接全部渲染出来，但是很显然，这个数据不是这样的。

拿到数据之后，我是这样处理的：

整体思路是这样的：

1. 先创建一个空数组mapList用来接收处理之后的数据；

2. 创建一个keyMap数组，里面放置表格中需要展示的数据所对应的字段

3. 遍历months数组，通过遍历这个数组，可以拿到每个月所对应的大对象，大对象里面有表格内容所对应的数据；

4. 遍历前面第二步所创建的keyMap数组，大对象中我们所需要的数据，全部追加到一个新的对象keyObj中去，keyObj这个对象目前就拿到了，months数组中每个月的营收金额、报告份数和辅助单位，以及月份。

5. 遍历第三步中大对象里面的deptValueDtos数组，也就是表格中需要展示的具体数据，通过遍历，可以拿到这个数组中的每一个对象，对象中以它的departId为key，以数组中的money、total和name的值为value，组成一个新的key-value对象，拿这个新的对象和前面所创建的keyObj通过浅拷贝（Object.assign()）进行合并，此时就能拿到一个全新的对象keyObj，这个对象里面包含了所有我们所需要的数据，然后再追加到mapList这个kong数组中去，让我们看看，这个数组在控制台中打印出来是什么样子的。

此时正式我所需要的，数据结构，头部字段绑定表头数据的id，而字段的值，对应着营收金额、报告份数和辅助单位。

然后再通过一个简单的v-for就能把数据渲染上去了

今天的分享到这里！！！