使用el-table的 span-method 属性控制合并行， 和 row-class-name 属性控制行样式
handleData : 处理表格数据，将同一名称的数据进行组合
getSpanArr ：获取单元格的合并行数
objectSpanMethod ：合并单元格
getRowClass ：设置表格行的样式类
getRowClass 设置的css样式
objectSpanMethod 原理：对每一个单元格返回一个 [rowSpan, colSpan] 数组， rowSpan 表示当前单元格会展示的行数， colSpan 表示当前单元格会展示的列数，设置为0时当前单元格被消除。
参考文章：
element-ui table :span-method（行合并）
js将数组中的相同项放在毗邻位置
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：1、外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观；
例如：
2、内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在
head
部分通过
标签定义内部样式表；
例如：<style
type="text/css">body
{background-color:
red}p
{margin-left:
20px}
3、内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何
CSS
属性。以下实例显示出如何改变段落的颜色和左外边距。
例如：
This
is
a
paragraph
colspan的作用是指定单元格横向跨越的行数。rowspan的作用是指定单元格纵向跨越的行数。
都是要直接加在tr th td上面的
<table border= "1 " width= "200 " >
<tr>
<td colspan="4" >ss
</td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "rowspan="2"> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% " rowspan="3"> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% " colspan="2" > </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
</table>
