EL表达式合并table列rowspan

本文介绍了如何利用EL表达式解决表格中发货批次相同列的rowspan合并问题,通过设置内外层集合的索引标识,实现合并收货状态和查看备注列,提供了一种优雅的解决方案。
摘要由CSDN通过智能技术生成

        如下图问题的描述:

        如图所示需要将发货批次相同的列合并,对应的收货状态和查看备注合并。刚开始的思路只限于用js写,后来经过同事的指点发现永EL表达式就能很好的解决,看代码:

 <div class="materialCode stdtable">
            <h2>发货情况</h2>
            <ul class="theadUl clearfix">
                <li class="td1">发货批次</li>
                <li class="td2">商品</li>
                <li class="td3">发货数量</li>
                <li class="td4">剩余数量</li>
                <li class="td5">收货数量</li>
                <li class="td6">收货状态</li>
                <li class="td7">操作</li>
            </ul>
            <table id="table1">
                <thead>
                    <tr>
                        <th class="td1"></th>
                        <th class="td2"></th>
                        <th class="td3"></th>
                        <th class="td4"></th>
                        <th clas
el-tableElement UI组件库中的表格组件,可以用于展示和处理大量的数据。 要实现el-table合并,可以使用scoped slot来实现。具体步骤如下: 1. 首先,在定义el-table组件时,需要在表头中定义需要合并。可以使用el-table-column组件,设置prop属性为当前的数据字段,并设置label属性为的标题。 2. 在合并需要展示数据的地方,使用scoped slot来自定义当前的显示内容。可以使用<template slot-scope="scope">来定义slot,并在其中使用scope.row来获取当前行的数据。 3. 在自定义的scoped slot中,根据当前行的数据以及需要进行合并的条件,通过判断并设置rowspan和colspan属性来实现合并。例如,可以使用v-if来判断条件,并使用scope.$index来获取当前行的索引。 下面是一个示例代码: ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="成绩"> <template slot-scope="scope"> <template v-if="scope.$index === 0 || scope.row.age !== tableData[scope.$index-1].age"> <span :rowspan="getRows(scope.row.age)">{{ scope.row.score }}</span> </template> </template> </el-table-column> </el-table> ``` 在上面的代码中,通过判断当前行的年龄和上一行的年龄是否相同来确定是否需要合并,通过getRows方法来计算合并的行数。 以上就是使用el-table实现合并的简单示例,通过使用scoped slot以及自定义的逻辑判断,可以根据具体的需求来进行灵活的合并操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值