el-table表格动态行/表头合并

一、行合并

1、:span-method="spanMethod"    //  table上的默认事件绑定 spanMethod

// 合并表格方法
function objectSpanMethod({ row, column}) {
    if (row.mergeCell.includes(column.property)) {
        const rowspan = row[`rowspan_${column.property}`];
        if (rowspan) {
            return { rowspan: rowspan, colspan: 1 };
        } else {
            return { rowspan: 0, colspan: 0 };
        }
    }
}；
function setTableRowSpan(tableData, fieldArr, effectMerge = {}) {
    let lastItem = {};
    fieldArr.forEach((field, index) => {
        lastItem = {};
        let judgeArr = fieldArr.slice(0, index + 1);
        if (effectMerge[field]) {
            judgeArr = [...effectMerge[field], field];
        }
        tableData.forEach(item => {
            item.mergeCell = fieldArr;
            const rowSpan = `rowspan_${field}`;
            // 判断是否合并到上个单元格。
            if (judgeArr.every(e => lastItem[e] === item[e] && item[e] !== '')) {
                // 判断是否所在行的列对应的值全部相同，并且此列的值不为空
                // 是：合并行
                item[rowSpan] = 0;
                lastItem[rowSpan] += 1;
            } else {
                // 否：完成一次同类合并。lastItem重新赋值，进入下一次合并计算。
                item[rowSpan] = 1;
                lastItem = item;
            }
        });
    });
}
export {
    objectSpanMethod,
    setTableRowSpan,
    }

2、数据加载完成后对数据处理下  ######唯一需要修改的地方，#########

//、、、第一个参数就是表头column数组、、、、['需合并字段1'，'需合并字段2'，....]
setTableRowSpan(this.billForm.column, ['goodsNo', 'goodsName', 'goodsColor']);

3、table合并列自动调用默认事件 spanMethod

// 合并单元
spanMethod({ row, column}){
            return objectSpanMethod({ row, column}, /* 其他参数 */);
       }

二、表头合并

:header-cell-class-name="headerCellClassName"

1、给多行表头添加一个class，根据实际情况修改

headerCellClassName({row,column, rowIndex, columnIndex }){
                if (rowIndex == 0 && columnIndex!=2) {
                    return 'aaa'   //添加类名表头第一行
                }
                if(rowIndex==1 && columnIndex!=0){
                    return 'bbb' //添加类名表头第二行
                }
            },

2、对表头不同列进行合并  根据实际情况修改

headerEditStyle(){
                let doms0 = document.querySelectorAll('.aaa')
                let doms1 = document.querySelectorAll('.bbb')
                doms1.forEach(function (item) {
                    item.rowSpan = 0
                    item.colSpan = 0
                    item.style.display = 'none'
                })
                doms0.forEach(function (item) {
                    item.rowSpan = 2
                })
            },