el-table合并行 根据id合并行

<template>
    <div>
        <el-table ref="table" :data="tabData" :span-method="objectSpanMethod">
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="code" label="编码" />
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabData: [],
                position: null,
                spanArr: []
            };
        },
        onl oad() {
            // 获取列表参数后走判断合并的方法
            // this.tabData = xxxxxx
            this.getSpanArr(this.tabData)
        },
        methods: {
            getSpanArr(e) {
                this.spanArr = []
                this.position = 0;
                let dataTable = e
                dataTable.forEach((item, index) => {
                    if (index === 0) {
                        this.spanArr.push(1);
                        this.position = 0;
                    } else {
                        // 当前元素与上一个元素 依据合并的值是否相同（例子中为mainId）
                        if (dataTable[index].mainId === dataTable[index - 1].mainId) {
                            this.spanArr[this.position] += 1;
                            this.spanArr.push(0);
                        } else {
                            this.spanArr.push(1);
                            this.position = index;
                        }
                    }
                })
            },

            objectSpanMethod({
                row,
                column,
                rowIndex,
                columnIndex //列index
            }) {
                //根据列的index 制定index为...的列合并
                if (columnIndex === 1 || columnIndex === 2) {
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
                //也可以根据列的字段名判断
                if (column.property === 'name' || column.property === 'code') {
                    const _row = this.spanArr[rowIndex]
                    const _col = _row > 0 ? 1 : 0
                    return {
                        rowspan: _row,
                        colspan: _col
                    }
                }
            }
        },
    };
</script>