el-table通过名称(Name)合并行实现代码

1、el-table 中加入

:span-method="arraySpanMethod"

2、添加方法:methods中

getRowspan方法将相同name数据单独获取出来,并记录个数,然后按着合并逻辑将合并规则当成对象rowSpan添加到原data中

arraySpanMethod直接在需要合并行里直接使用合并规则即可

      getRowspan(data){
            const counts = {};
            data.forEach(item => {
                if (counts[item.name]) {
                    counts[item.name]++;
                } else {
                    counts[item.name] = 1;
                }
            });
           let names =  Object.entries(counts).map(([name, count]) => ({name, count }));
           data.forEach((item,index) =>{
                names.forEach(res =>{
                    if(item.name=== res.name){
                        if(index != 0 && item.declareName === data[index - 1].name){
                            item.rowSpan = [0,0]
                        }else{
                            item.rowSpan = [res.count,1]
                        }
                    }
                })
           })
           return data;
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 2) {
                return row.rowSpan
            }
        },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一步一脚印【天道酬勤】

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值