iview table 表 重复行列合并

iview table表 重复行列合并

iview官方例子:iview table表格
1、唯一且重复的合并
2、在唯一合并下的不唯一且重复的合并
3、不唯一且重复在上一个不唯一合并条件下的合并
return [1,2] => 将1行2列合并,同时需要将第一行第二列(或第一行第一列的表格删除)的表格删除使其return [0,0]
·······································································
计算合并的列与数量

			//表合并
            handleData(data) {
                let that = this
                //是唯一值但有重复的合并
                //所有的不同的加油站
                let stationArr = []
                data.forEach(e => {
                    !stationArr.includes(e.StationCode) ? stationArr.push(e.StationCode) : stationArr
                })
                // 设置加油站的默认跨行数0
                let stationObj = []
                stationArr.forEach(e => {
                    stationObj.push({
                        id: e,
                        num: 0
                    })
                })
                // 跨行数计算
                data.forEach(e => {
                    //加油站的
                    stationObj.forEach(item => {
                        e.StationCode == item.id ? item.num++ : item.num
                    })
                })
                //将计算好的合并数赋给第一条重复的数据,其它重复的数据合并的参数全部置空
                data.forEach(e => {
                    //加油站
                    stationObj.forEach((item, index) => {
                        if (e.StationCode == item.id) {
                            if (stationArr.includes(e.StationCode)) {
                                e.mergeCol = item.num
                                stationArr.splice(stationArr.indexOf(e.StationCode), 1)
                            } else {
                                e.mergeCol = 0
                            }
                        }
                    })
                })

				//不唯一且重复的情况下,在唯一的基础上合并重复
                for (var j = 0; j < data.length; j++) {
                    //  > 1 StationCode表示 有合并需要在StationCode合并的row中 再合并
                    if (data[j].mergeCol > 1) {
                        for (var k = 0; k < data[j].mergeCol; k++) {
                            //天数合并
                            if (data[j + k].dayalready !== 1) {
                                if (k + 1 < data[j].mergeCol) {
                                    data[j + k].mergeDay = 1
                                    for (var b = k + 1; b < data[j].mergeCol; b++) {
                                        if (data[j + k].Day === data[j + b].Day) {
                                            data[j + k].mergeDay++
                                            data[j + b].mergeDay = 0
                                            data[j + b].dayalready = 1
                                        } else {
                                            break
                                        }

                                    }
                                }

                            }
                        }
                    }
                    //不唯一且重复(只有0和1),在上一个重复的合并下再次细分合并
                    //短信合并
                    if (data[j].mergeDay > 1) {
                        for (var k = 0; k < data[j].mergeDay; k++) {
                            //短信合并
                            if (data[j + k].noticealready !== 1) {
                                if (k + 1 < data[j].mergeDay) {
                                    data[j + k].mergeNotice = 1
                                    for (var b = k + 1; b < data[j].mergeDay; b++) {
                                        if (data[j + k].Notice === data[j + b].Notice) {
                                            data[j + k].mergeNotice++
                                            data[j + b].mergeNotice = 0
                                            data[j + b].noticealready = 1
                                        } else {
                                            break
                                        }
                                    }
                                }

                            }
                        }
                    }
                }
                return data
            },

合并的表格代码(本例只合并列)

	//在数据处理时在每个重复并需要合并的第一个插入了含合并数量的值
 			//表格合并
            handleSpan({row, column, rowIndex, columnIndex}) {
                // 序号、加油站合并、状态、时间
                if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2 || columnIndex == 3) {
                    return {
                        rowspan: row.mergeCol === 0 ? 0 : row.mergeCol, //从第一个开始计算合并数,将计算的合并数赋值到对应的第一个(或最后一个)对象中,mergeCol有值则代表合并,为0则代表删除
                        colspan: row.mergeCol === 0 ? 0 : 1
                    };
                }
                // 持续天数合并
                if (columnIndex == 4) {
                    return {
                        rowspan: row.mergeDay === 0 ? 0 : row.mergeDay,
                        colspan: row.mergeDay === 0 ? 0 : 1
                    };
                }
                // 是否发送短信
                if (columnIndex == 7) {
                    return {
                        rowspan: row.mergeNotice === 0 ? 0 : row.mergeNotice,
                        colspan: row.mergeNotice === 0 ? 0 : 1
                    };
                }
            },

你可能感兴趣的:(Vue,vue)