vue elementui table 多个表格table合并、多个合并列

效果图如下：

技术点：

代码实现：

html部分
<div>
      <el-table :data="table1" border :show-header="false" :span-method="arraySpanMethod">
				<el-table-column align="center" min-width="80%" prop="id" label=" "></el-table-column>
				<el-table-column align="center" min-width="80%" prop="name" label=" "></el-table-column>
				<el-table-column align="center" min-width="80%" prop="name2" label=" "></el-table-column>
				<el-table-column align="center" min-width="80%" prop="money" label=" "></el-table-column>
				<el-table-column align="center" min-width="80%" prop="money" label=" "></el-table-column>
				<el-table-column align="center" min-width="80%" prop="money" label=" "></el-table-column>
				<div slot="append" style="text-align: center">
					<el-table :data="table2" border :show-header="true">
						<el-table-column align="center" min-width="80%" prop="xh" label="序号"></el-table-column>
						<el-table-column align="center" min-width="80%" prop="l2" label="列2"></el-table-column>
						<el-table-column align="center" min-width="80%" prop="l3" label="列3"></el-table-column>
						<el-table-column align="center" min-width="80%" prop="l4" label="列4"></el-table-column>
						<el-table-column align="center" min-width="80%" prop="l5" label="列5"></el-table-column>
						<el-table-column align="center" min-width="80%" prop="l6" label="列6"></el-table-column>
					</el-table>
				</div>
			</el-table>
    </div>
    js部分
    table1: [
        {
          id: '行1',
          name: '1'
        },
        {
          id: '行2',
          name: '2'
        },
        {
          id: '行3',
          name: '3'
        },
        {
          id: '行4',
          name: '4'
        },
        {
          id: '行5-1',
          name: '5',
          name2: '行5-2',
          money:'6'
        },
      ],
      table2: [
        {
          xh: '1',
          l2: '1-l2',
          l3: '1-l3',
          l4: '1-l4',
          l5: '1-l5',
          l6: '1-l6',
        },
        {
          xh: '2',
          l2: '2-l2',
          l3: '2-l3',
          l4: '2-l4',
          l5: '2-l5',
          l6: '2-l6',
        },
      ],
methods:{
      /** 合并行 */
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (rowIndex < 4) { // 处理前4行
        if (columnIndex === 0) { // 第1列不合并
          return [1, 1]
        } else { // 第1列后的都合并
          return [1, 5]
        }
      } else { // 处理第5行
        if (columnIndex === 1) { // 第1列后面合并1、2列（列数是从0开始的）
          return [1, 2]
        } else if (columnIndex === 3) { // 从第3列后面合并3、4列（列数是从0开始的）
          return [3, 4]
        }
      }
    },
}

完成。