如何合并表格项

Q:一个表格分为多级,相同级别的列对应的行数据相同时要合并该行


image.png
// 合并方法
// 类型为第一级
// 套餐和计划量为第二级
// 其余列为第三级
setRowSpanColSpan (arr: any[]) {
        let sameTypeRows = 1;
        let sameNameSumRows = 1;
        for (let index = arr.length - 1; index >= 0; index--) {
            // 判断类型列是否需要合并
            let typeRowColSpan = {
                rowspan: 0,
                colspan: 0
            };
            if (index === 0 || arr[index].type !== arr[index - 1].type) {
                typeRowColSpan = {
                    rowspan: sameTypeRows,
                    colspan: 1
                };

                sameTypeRows = 1;
            } else {
                sameTypeRows++;
            }
            arr[index].typeRowColSpan = typeRowColSpan;

            // 判断套餐列和计划量列是否需要合并
            let nameSumRowColSpan = {
                rowspan: 0,
                colspan: 0
            };
            if (index === 0 || arr[index].type !== arr[index - 1].type || arr[index].name !== arr[index - 1].name || arr[index].plan_sum !== arr[index - 1].plan_sum) {
                nameSumRowColSpan = {
                    rowspan: sameNameSumRows,
                    colspan: 1
                };

                sameNameSumRows = 1;
            } else {
                sameNameSumRows++;
            }

            arr[index].nameRowColSpan = nameSumRowColSpan;
            arr[index].sumRowColSpan = nameSumRowColSpan;
        }
    }
// row-col-span所引用的方法
toBeMergedColumn = [0, 1, 2]; // 第一列(类型 type)、第二列(套餐 name)、第三列(计划量 plan_sum)为待合并列
objectRowColSpan ({ row, columnIndex }) {
        if (this.toBeMergedColumn.includes(columnIndex)) {
            if (columnIndex === 0) {
                return row.typeRowColSpan;
            }
            if (columnIndex === 1) {
                return row.nameRowColSpan;
            }
            if (columnIndex === 2) {
                return row.sumRowColSpan;
            }
        }
    }

你可能感兴趣的:(如何合并表格项)