Element Table 单元格中嵌套表格（Table） 合并行效果

在Element中实现表格合并行功能一般是通过自定义span-method方法，此方法要求表格数据源中需要合并行的单元格中数据相同，根据相同数据来实现合并算法。

本例通过在父Table单元格中嵌套子Table实现合并行效果（也使用了span-method方法），使用这种方法时需要将表格数据源构造成父子结构或者与后端沟通直接让接口返回父子结构数据，本例 中这种父子结构数据是由后端接口返回的，前端无需处理数据结构，直接使用即可。

一、最终效果

二、接口返回的数据结构

接口返回的数据结构是父子层次的。

三、HTML模板代码

<template>
    <el-table 
        :data="tableData"
        :span-method="spanMethodOfParent"    <!-- 设置父Table列合同规则 -->
    >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="资源方" prop="resourceName"></el-table-column>
        <el-table-column label="计划周期" prop="planCycle"></el-table-column>
        <!-- 在父Table的输气场站单元格中嵌套子Table -->
        <el-table-column label="输气站场" prop="downGasPlace">
            <template slot-scope="scope">
                <el-table 
                    :data="scope.row.escalationDeliverVOList" 
                    :show-header="false"     <!-- 设置子Table隐藏表头 -->
                >
                    <!-- 子Table中各行列只是容纳在了父Table的输气场站单元格中 -->
                    <el-table-column label="输气站场" prop="deliverName" ></el-table-column>
                    <el-table-column label="日指定量" prop="gasNum"></el-table-column>
                    <el-table-column label="计划备注"  prop="reportDesc"></el-table-column>
                    <el-table-column label="日批复量" prop="approvalGasNum"></el-table-column>
                    <el-table-column label="上报状态"  prop="reportReviewStatus"></el-table-column>                  
                </el-table>
            </template>          
        </el-table-column>
        <!-- 下面父Table中的列，用于父Table表头显示，不用设置prop属性 -->
        <el-table-column label="日指定量"></el-table-column>
        <el-table-column label="计划备注"></el-table-column>
        <el-table-column label="日批复量"></el-table-column>
        <el-table-column label="上报状态"></el-table-column>              
        <el-table-column label="参考">
            <template slot-scope="scope">
                <el-button type="text">查看</el-button>
            </template>            
        </el-table-column>
        <el-table-column label="操作" prop="opt">
            <template slot-scope="scope">
                <el-button type="text">上报</el-button>
                <el-button type="text">暂存</el-button>
            </template>
        </el-table-column>          
    </el-table>
</template>

四、JS代码

// 父Table列合并规则
spanMethodOfParent({row, column, rowIndex, columnIndex}) {
    // 从父Table的第3列开始，合并之后的5列（包含第3列），将5列合同成一个单元格，容纳子Table
    if(columnIndex === 3) {
        return [1, 5]
    }
    // 隐藏父Table中的第3列到第7列
    if(columnIndex > 3 && columnIndex < 8) {
        return [0, 0]
    }
},

 至此，本例就实例了父子Table嵌套效果。