❧ ElementUI表格行合并

表格合并行

• 表格合并行通用函数

/**
 * @params list Array 拆分开且整理后的列表数据
 * @params mainField  主字段，根据此字段合并mergeFields里的其他字段
 * @params mergeFields Array 要合并的字段，可以为多个
 * @return Array 返回列表数据
 */
const mergeTableRow = (list: Array<any>, mainField: string, mergeFields: Array<string>) => {
    if (!mergeFields || mergeFields.length === 0) {
        return list
    }
    const oMergeVal: {[key: string]: {rowspan: number, colspan: number}} = {}
    list = list.map((item) => {
        if (oMergeVal[item[mainField]]) {
            // 累加合并行数，其他行置0
            oMergeVal[item[mainField]].rowspan++
            item[`${mainField}_span`] = { rowspan: 0, colspan: 0 }
        } else {
            // 首次置默认
            item[`${mainField}_span`] = { rowspan: 1, colspan: 1 }
            oMergeVal[item[mainField]] = item[`${mainField}_span`]
        }
        mergeFields.forEach((field) => {
            item[`${field}_span`] = item[`${mainField}_span`];
        })
        return item
    })
    return list
}

// example
const list = [{id: 1, name: '张三', book: '励志书籍'}, {id: 1, name: '张三', book: '技能书籍'}, {id: 2, name: '李四', book: '心理书籍'}]
const tableList = mergeTableRow(list, 'id', ['name'])

• 使用方法

<el-table :data="tableList" border style="width: 100%" v-loading="loading" :span-method="mergeSpan"></el-table>

const mergeSpan = ({ row, column }: { row: any, column: any}) => {
    const span = `${column['property']}_span`
    return row[span] || { rowspan: 1, colspan: 1}
}