element表格行合并通用方法

        /**
        * mergeRowspan
        * @param  tableData: Record<string, string | number>[]
        * @param config: { referenceValue: string, combineProp: string[] } referenceValue - 基准值 combineProp - 合并行的依据 基准值需为合并依据的第一项
        * @returns tableData: any[]
        */
        function mergeRowspan(tableData, config) {
            if (!tableData.length) {
                return tableData
            }
            // 读取配置
            const { referenceValue, combineProp } = config
            // 判断基准值是否存在 | 基准值是否tableData中数据的属性
            if (!referenceValue || !tableData[0].hasOwnProperty(referenceValue)) {
                return tableData
            }
            // 对tableData数据已基准值数据值进行分组格式化,以确保相同行相邻
            const tableDataGroup = tableData.reduce((pre, current) => {
                pre[current[referenceValue]] = pre[current[referenceValue]] || []
                pre[current[referenceValue]].push(current)
                return pre
            }, {})
            
            let list = []
            for (const key in tableDataGroup) {
                if (Object.hasOwnProperty.call(tableDataGroup, key)) {
                    const item = tableDataGroup[key];
                    list = [...list, ...item] 
                }
            }
            // rowspan 合并几行 colspan 合并后占用几列
            combineProp.forEach((column, index) => {
                // 记录合并项
                let combineCount = 1
                // 使用倒序遍历
                for (let i = list.length - 1; i >= 0; i--) {
                    const curr = list[i]
                    const prev = list[i - 1]
                    if (i === 0) {
                        // 循环最后一次
                        curr[`${column}-span`] = {
                            rowspan: combineCount,
                            colspan: 1
                        }
                        break
                    }
                    if (prev[`${column}`] === curr[`${column}`]) {
                        ++combineCount
                        curr[`${column}-span`] = {
                            rowspan: 0,
                            colspan: 0
                        }
                    } else {
                        curr[`${column}-span`] = {
                            rowspan: combineCount,
                            colspan: 1
                        }
                        // 前后项不相符时,对combinecount进行重置
                        combineCount = 1
                    }
                }
            })
            return list
        }
		// 示例
        var data = [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987122',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987122',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]

        var a = mergeRowspan(data, { referenceValue: 'id', combineProp: ['id', 'name'] })
        console.log(a)
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值