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嵌套效果。

  • 10
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值