element-ui table表格多行合并

前提条件：要求数据源必须是有序的（如按id分类，即id相同的要挨在一起，不能乱排。）

然后，首先对数据源进行一次遍历，计算每个id相同的有几项，然后做个标识

watch: {
    list: { // 监听 list 数据
        handler(val, oldVal) {
            let list = this.list; // 数据源
            let index = {};
            for (let item of list) {
                let token = item.ID; // 标识字段
                // 没有该对象属性，说明第一次
                if (index[token] === undefined) {
                    index[token] = 1;
                } else {
                    index[idtoken++;
                }
            }
            this.index = index; // 标识
        },
        deep:true // 深度监听，数据源发生变化重新计算
    },
},

id 相同项，首行进行合并，合并后删除标识，比如第一个是[6, 1],后面五个则返回[0, 0]

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    let cols = [0, 1, 2]; // 需要合并的列
    if (cols.some(index => index === columnIndex)) {
        let token = row.ID;
        // 只针对首行做合并单元格操作
        if (this.index.hasOwnProperty(token)) { 
            const rowSpan = this.groupNumber(token);
            if (columnIndex === Math.max.apply(null, cols)) {
                // 删除已经执行过合并操作的标识
                delete this.index[token];
            }
            return [rowSpan, 1]
        }
        return [0, 0];
    }
},

获取id相同的有几次

groupNumber(token) {
    if (this.index && this.index.hasOwnProperty(token)) {
        return this.index[token];
    }
}