el-table 合并行计算

思路

• 以需要合并的列属性为key, 用children收集, children.length即需要合并的行数,
• 如要将grade(层级), class(类型)两列相同值的行合并：
• 组装第一次结果 {key: grade, children: [{ grade: 1, name: 'AA' }, { grade: 1, name: 'BB' }]}
• 组装第二次结果 {key: grade,class, children: [{ grade: 1, class: 1, name: 'AA' }, { grade: 1, class: 1, name: 'BB' }]}
• 重复组装直到最后...
• 最后根据组装结果给原table每行数据添加属性_merge: {rowspan: children.length, colspan: 1}, 返回table

const merge = function (
    colArr,
    list
) {
    var allProps = [];
    colArr.forEach((props, index) => {
        allProps.push(...props);
        list = getLevel(props, allProps, list);
    });
    return list;
};
//组装层
function getLevel(props, allProps, list) {
    var rowKey = {};
    for (var item of list) {
        let propInfo = getPropStr(allProps, item);
        if (rowKey[propInfo.key]) {
            rowKey[propInfo.key].children.push(item);
        } else {
            let obj = propInfo;
            obj.children = [item];
            rowKey[propInfo.key] = obj;
        }
    }
    console.log('propStr.toString()-->>>>', rowKey)

    let info = [];
    for (var key in rowKey) {
        rowKey[key].children.forEach((item, index) => {
            if (index == 0) {
                item = Object.assign(
                    item,
                    getMergeInfo(props, rowKey[key].children.length)
                );
            } else {
                item = Object.assign(item, getMergeInfo(props, 0));
            }
            info.push(item);
        });
    }
    return info;
}
//获取合并信息
function getMergeInfo(props, num) {
    let obj = {};
    props.forEach(item => {
        obj[item + "_merge"] = {
            rowspan: num,
            colspan: 1
        };
    });
    return obj;
}
const RandomId = len => Math.random().toString(36).substr(3, len);
// 把属性的值拼接在⼀起,并和属性的值⼀起返回。
function getPropStr(props, info) {
    let obj = {};
    let propStr = props.map(item => {
        obj[item] = info[item];
        return info[item] !== 0 && !info[item] ? RandomId(8) : info[item];
    });
    obj.key = propStr.toString();
    return obj;
}
// span-method合并函数：
function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (row[column.property + "_merge"]) {
        return row[column.property + "_merge"];
    } else {
        return { rowspan: 1, colspan: 1 };
    }
}

使用

// var colArr = [["id", "grade"], ["class"]];
var colArr = [["id"], ["grade"], ["class"]];
var list = [
    { id: 1, grade: 1, class: 1, name: "张三" },
    { id: 1, grade: 1, class: 1, name: "李四" },
    { id: 1, grade: 1, class: 2, name: "王五" },
    { id: 1, grade: 1, class: 2, name: "找六" },
    { id: 2, grade: 2, class: 7, name: "张三_1" },
    { id: 2, grade: 2, class: 7, name: "李四_1" },
    { id: 2, grade: 2, class: 3, name: "王五_1" },
    { id: 2, grade: 2, class: 3, name: "找六_1" },
    { id: 2, grade: 2, class: null, name: "null1" },
    { id: 2, grade: 2, class: null, name: "null2" }
];
this.tableDate = merge(colArr, list)

console.log(this.tableDate);
// 单行的数据结果
// {
//   "id": 1,
//   "grade": 1,
//   "class": 1,
//   "name": "张三",
//   "id_merge": {
//     "rowspan": 4,
//     "colspan": 1
//   },
//   "grade_merge": {
//     "rowspan": 4,
//     "colspan": 1
//   },
//   "class_merge": {
//     "rowspan": 2,
//     "colspan": 1
//   }
// }