手动进行table的合并列操作

手动进行表格的合并列操作

前提：vue的前端框架，加原生的table

需求：

1. 点击表格的尾部的操作新增按钮可以新增并合并行
2. 删除的时候删除行并改变合并的列
3. 最后按json的格式提交表数据给后台
   思路：
   1. 做一个二维数组，每个数组表示是表格一行，每行里的对象是每一行的td，每个td带一个rowspan或者colspan的属性表示要操作合并的项
   2. 然后利用vue做数据驱动操作数据就可以正常的合并了
   3. 数据示例

[
	[ {
   val: 1, name: '', rowspan: -1}, {
   val: 1, name: '',rowspan: -1} ],
	[ {
   val: 1, name: '',rowspan: -1}, {
   val: 1, name: '',rowspan: -1} ],
	[ {
   val: 1, name: '',rowspan: -1}, {
   val: 1, name: '',rowspan: -1} ],
	[ {
   val: 1, name: '',rowspan: -1}, {
   val: 1, name: '',rowspan: -1} ],
	[ {
   val: 1, name: '',rowspan: -1}, {
   val: 1, name: '',rowspan: -1} ],
	[ {
   val: 1, name: '',rowspan: -1}, {
   val: 1, name: '',rowspan: -1} ]
]

说明：
1. 当时是前11个需要合并列，所以设置的11列，
2. 做新增行的时候是增加20个td，做新增属性的时候是增加9个属性，因为前11个属性要做合并列会占位前11个，新增子的时候要注意放一个parent，就是说明是哪一行的子数据，例如b是a的子，然后a要遍历然后修改前11个td的rowspan
3. 做删除的时候要注意，如果删除的是整一行的数据那么要判断它是否还有子行数据，如果有就将它的子拼接上前合并的11个td，并且将rowspan减一，如果是只有一个子，那么拼接为20个长度后rowspan = -1， 还要注意重新排序序号。

代码示例：

<template>
    <div class="main-table">
        <table class="table">
            <thead>
                <tr  class="thead-tr">
                    <th v-for="(item, index) in tableHeadList" :key="item + index + id">{
   {
   item}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tbodyList" :key="index + id">
                    <td :rowspan="it.rowspan" v-for="(it,i) in item" :key="it.rowspan + it.val1 +  i">
                        <span v-if="it.type === 0">{
   {
   it.val1}}</span>
                        <span v-if="it.type === 1">
                            <el-input type="text" size="mini"  v-model="it.val1"></el-input>
                        </span>
                        <span v-if="it.type === 2">
                            <ec-enum-select size='mini' type="position" v-model="it.val1"></ec-enum-select>
                        </span>
                    </td