vue中 table 表格进行多行合并

一. 简介

刚入职的小白，公司目前采用的框架是 SpringBoot + Vue . 前段的UI控件是Iview。由于我们的公司Java开发是全栈的。所以前端的工作也交到了我们的手里。但是在项目开发的过程中遇到了一些问题。比如我们想要绘制出下面所示的一种表格页面。不仅需要实现单列的合并，还包括了第二列行的合并。Iview 的官方文档也并没有这种表格的展现及相应的属性。。

于是就开启了无限搜索模式，可惜效果甚微。当然，也想像大神们那样根据Iview的组件和自己的需求，设计一个table 组件。可能力十分有限。于是 退而求其次 ，尝试着用 原生 table表格进行实现。

二. 实现方法

用 table 表格 实现行合并 ，列合并还是相对简单点的。但那是对写死的数据。如果数据是动态加载的，并且设计到多列中的行合并。对我这种菜鸟来说还是很有难度的~~
幸好，找到了 一些关于 table 表格进行行合并的方法，在经过分析和测试。得到了目前所需要的初级版本（上图所示）。
代码如下所示：

如下为封装的测试数据：

目前也只能想到这种解决办法，也希望路过的大神们可以给点建议，如何用Iview组件或者更好的方法去实现这个 table 表格 双列的 行合并的问题。
特此提醒： 实现的这种方法主要是参考 别人的 一个 demo .给大家一个链接。[ 参考链接]