Ts Elements Vue 合并table表格

/**

 * 合并行方法

 * @param {Number} rowIndex 行索引

 * @param {Number} columnIndex 列索引

 * @param {Array} dataSource 数据源

 * @param {Array} mergeCfg 合并配置 例如:[{searchKey: 'score', columnIndex: 0 }] searchKey：需检索的属性，columnIndex：代表要合并的列数

 */

export function mergeRows(rowIndex:any, columnIndex:any, dataSource:any, mergeCfg:any) {

    for (let item of mergeCfg) {

        let searchKey = item.searchKey

        if (columnIndex === item.columnIndex) { // 要合并的列

            if (rowIndex !== 0 && dataSource[rowIndex][searchKey] === dataSource[rowIndex - 1][searchKey]) { // 非第一行合并规则

                return [0, 0]

            } else { // 第一行合并规则

                let rowIndexCount = rowIndex

                let count = 0

                while (rowIndexCount + 1 < dataSource.length) { //  用当前行数据跟后续行数数据对比

                    if (dataSource[rowIndexCount + 1][searchKey] === dataSource[rowIndexCount][searchKey]) {

                        rowIndexCount++

                        count++

                    } else { // 数据不相等跳出循环

                        break

                    }

                }

                return [count + 1, 1]

            }

        }

    }

}

//调用

cellMerges( {row, column, rowIndex, columnIndex}:any){

            // 合并行条件

                const mergeCfg =  [

                    { searchKey: 'typeIndex', columnIndex: 0 },

                    { searchKey: 'typeIndex', columnIndex: 1 },

                    { searchKey: 'typeIndex', columnIndex: 3 },

                    { searchKey: 'typeIndex', columnIndex: 5 }

                ]

                return mergeRows(rowIndex, columnIndex, this.dataSource, mergeCfg)

            }

// Element

<el-table 

                    :data="dataSource" 

                    :span-method="cellMerges"

>

</el-table >