Vue el-table列合并

 1.封装公用方法

const dataMethod = (data, isH = []) => {
    let spanObj = {}; // 存储每个key 对应的合并值
    let pos = {}; // 存储的是 key合并值得索引

    // 循环数据
    for (let i = 0; i < data.length; i++) {
        let dataI = data[i];

        // 循环数据内对象，查看有多少key
        for (let j in dataI) {
            // 如果只有一条数据时默认为1即可，无需合并
            if (i === 0) {
                spanObj[j] = [1];
                pos[j] = 0;
            } else {
                let e = dataI;
                let k = data[i - 1];

                // 判断上一级别是否存在，存在当前的key与上级别的key是否一样
                // 以及是否有数组规定只允许合并某些列的单元格
                // 新增额外的条件: 当前列和前一列的值不相同
                if (k && e[j] === k[j] && (!isH.length || isH.includes(j))
                    && e[isH[isH.indexOf(j) - 1]] === k[isH[isH.indexOf(j) - 1]]) {
                    // 如果上一行和当前行相等，并且指定合并的列满足条件，数组就加1 数组后面就添加一个0
                    spanObj[j][pos[j]] += 1;
                    spanObj[j].push(0);
                } else {
                    spanObj[j].push(1);
                    pos[j] = i;
                }
            }
        }
    }
    return spanObj;
};

export { dataMethod };

2.方法调用

<el-table v-loading="loading" 
   :data="ParamsList" border 
   :default-selection="ParamsList[0]"
   :header-cell-style="{ background: '#eef1f6', color: '#606266', height: '16px', textAlign: 'center', }"
   @current-change="handleSelection" 
   highlight-current-row 
   :span-method="arraySpanMethod">
</el-table>

//获取数据后指定需要合并的列通过方法计算合并的结果
this.spanTable = dataMethod(this.ParamsList, ["A", "B"])

//通过element el-table的事件调用合并方法
 arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            let _row = this.spanTable[column.property] ? this.spanTable[column.property][rowIndex] : 1;
            let _col = _row > 0 ? 1 : 0;
            return {
                rowspan: _row,
                colspan: _col
            }
        },

结果