antd表格table多行多列合并

1.想要的效果：

2.分析数据，数组下多个对象相同的名字合并。

3.columns表头数据，data-source表格数据

正常情况下只需要合并第一列，进来直接调用 rowSpan('col_1', 后端返回的数据) 就行

第二列合并如果直接传col_2会存在，所有数据相同名字都会整合，出现表格错乱问题；需要将原始数据进行处理 调用changeArr(data) 数据变成[ { name:' xxx ', origin: [ { col_1: 'xx', col_2: 'xxx',col_3: 'xx', col_4: 'xxx',} , { ...} ] } ] 名字相同的整合在一个数组再

将origin数组在传入到rowSpan函数，最后，传入col_2和col_2得到的俩个数组进行合并成一个。

<a-table :columns="columns" :data-source="data"></a-table>

data(){
    return {
        columns:[
            {
                title: '测算单位',
                dataIndex: 'col_1',
                key: 'col_1',
                align: 'center',
                //函数返回要合并的数据
                customRender:(value,row,index)=>{
                    return {
                        children: row.col_1,
                        attrs: {
                            rowSpan: row.col1RowSpan
                        }
                    }
                }
            },
            {
                title: '最新授权指标',
                dataIndex: 'col_2',
                key: 'col_2',
                align: 'center',
                //函数返回要合并的数据
                customRender:(value,row,index)=>{
                    return {
                        children: row.col_2,
                        attrs: {
                            rowSpan: row.col2RowSpan
                        }
                    }
                }
            },
            {
                title: '对应资产名称',
                dataIndex: 'col_3',
                key: 'col_3',
                align: 'center',
            },
            {
                title: '基础参数增量',
                dataIndex: 'col_4',
                key: 'col_4',
                align: 'center',
            },
        ]
    }
}

methods:{
//合并
rowSpan(key, data){
    const arr = data.reduce((result,item)=>{
        if(result.indexOf(item[key]) < 0 ){
            result.push(item[key])
        }
        return result
    },[])
    .reduce((result,keys)=>{
        const children = data.filter((item)=> item[key] === keys )
        result = result.concat(
            children.map((item, index)=>{
                ...item,
                [`${key}RowSpan`]:index === 0 ? children.length : 0
             })
        )
        return result
    },[])
    return arr
}

//整合原始数据 相同的col_1合成一个数组
changeArr(data){
    const nameArr = []
    const resultData = []
    for(let i = 0; i < data.length; i++){
        if(nameArr.indexOf(data[i]).col_1 === -1){
            resultData.push({
                name: data[i].col_1,
                origin: [data[i]]
            })
            nameArr.push(data[i].col_1)
        }else {
            for(let j=0; j< resultData.length; j++){
                if(resultData[j].name === data[i].col_1){
                     resultData[j].origin.push(data[i])
                     break
                }
            }
        }
    }
    return resultData
},
//将col_1RowSpan和col_2RowSpan合并
resArr(arr1,arr2){
    var newArr = []
    for(let index = 0; index < arr1.length; index ++){
        const element1 = arr1[index]
        for(let index1 = 0; index1 < arr2.length; index1 ++){
        const element2 = arr2[index1]
            if(element1.col_1 == element2.col_1 &&
               element1.col_2 == element2.col_2 &&
               element1.col_3 == element2.col_3 
              ){
                 let newobj = Object.assign(element1,element2)
                 newArr.push(newobj)
               }
        }
    }
    return newArr
  }
}

4.表格合并

//正常合并第一列直接调用就行
mergeRowCell(data){
    let tableData = this.rowSpan('col_1',data)
    this.dataSource = tableData 
}

//多行合并
mergeRowCell(data){
    let tableData1 = this.rowSpan('col_1',data)
    let tableData2 = []
    this.changeArr(data).forEach((item)=>{
        tableData2.push(...this.rowSpan('col_2',item.origin))
    })
    //需要将tableData1里面存在col_1RowSpan和tableData2里面存在col_2RowSpan合并为一个数组
    this.dataSource = this.resArr(tableData1,tableData2)
}