element ui el-table表格合并行(根据前一列合并)

element ui el-table表格合并行(根据前一列合并)

效果如图,根据前一列进行合并
在这里插入图片描述

使用el-table的span-method合并行或列的计算方法

// An highlighted block
<div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
            style="height:85%">
            <el-table :data="tableData" border :span-method="objectSpanMethod" height="100%"
                header-cell-style="background-color:#eee">
                <el-table-column prop="target" label="型号" header-align="center"></el-table-column>
                <el-table-column prop="band" label="谱段" header-align="center"></el-table-column>
                <el-table-column prop="circleNumber" label="圈号" header-align="center"></el-table-column>
                <el-table-column prop="level" label="级别" header-align="center"></el-table-column>
                <el-table-column prop="count" label="个数" header-align="center"></el-table-column>
            </el-table>

2.定义需要存放合并项信息的对象rowMergeArrs、一个需要合并列的项目的集合needMergeArr

needMergeArr: [“target”, “band”, “circleNumber”],
rowMergeArrs: []

3.获取表格数据tableData后处理数据

this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData)

4.定义rowMergeHandle方法

// 定义rowMergeHandle方法来处理table数据
            rowMergeHandle(arr, data) {
                if (!Array.isArray(arr) && !arr.length) return false;
                if (!Array.isArray(data) && !data.length) return false;
                let needMerge = {};
                arr.forEach((i, idx) => {
                    needMerge[i] = {
                        rowArr: [],
                        rowMergeNum: 0,
                    };
                    if (idx == 0) {
                        data.forEach((item, index) => {
                            // 表格首个数据单独处理
                            if (index === 0) {
                                needMerge[i].rowArr.push(1);
                                needMerge[i].rowMergeNum = 0;
                            } else {
                                if (item[i] === data[index - 1][i]) {
                                    needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                                    needMerge[i].rowArr.push(0);
                                } else {
                                    needMerge[i].rowArr.push(1);
                                    needMerge[i].rowMergeNum = index;
                                }
                            }
                        });
                    } else {
                        let firstRowArr = needMerge[arr[0]].rowArr;
                        let firstRowArrDeal = [];
                        firstRowArr.forEach((item, index) => {
                            if (item > 0) {
                                firstRowArrDeal.push(index);
                            }
                        });
                        data.forEach((item, index) => {
                            let sign = false;
                            if (firstRowArrDeal.indexOf(index) > 0) {
                                needMerge[i].rowMergeNum = index;
                                sign = true;
                            }
                            // 表格首个数据单独处理
                            if (index === 0) {
                                needMerge[i].rowArr.push(1);
                                needMerge[i].rowMergeNum = 0;
                            } else {
                                if (item[i] === data[index - 1][i]) {
                                    if (sign) {
                                        needMerge[i].rowArr.push(1);
                                    } else {
                                        needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                                        needMerge[i].rowArr.push(0);
                                    }
                                } else {
                                    needMerge[i].rowArr.push(1);
                                    needMerge[i].rowMergeNum = index;
                                }
                            }
                        });
                    }
                });
                return needMerge;
            },

5.定义objectSpanMethod方法

objectSpanMethod({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                for (let res in this.needMergeArr) {
                    if (this.needMergeArr[res] == column.property) {
                        return this.mergeAction(column.property, rowIndex, columnIndex);
                    }
                }
              }

6.定义mergeAction方法来获取需要合并的行数和列表

mergeAction(val, rowIndex) {
                let _row = this.rowMergeArrs[val].rowArr[rowIndex];
                let _col = _row > 0 ? 1 : 0;
                return [_row, _col];
            },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值