ant vue table表格数据动态合并,支持分页

ant vue table表格数据动态合并,支持分页

表格的表头columns,需要合并的列

columns:[
    { 
        title:'xx',
        dataIndex:'xxx',
        width:100,
        key::'xxx',
        customRender:(value,row,index)=>{ 
    		const obj = { 
            	children:value,
    			attrs:{ }
            }
            obj.attrs.rowSpan = this.renderData(value,this.tableData,Number(index)+Number(this.pageSize * (this.current - 1)),'xxx') //执行renderData函数,对表格数据进行合并处理,其中tableData为表格的数据,pageSize为表格每一页有多少条数,current为当前页数,'xxx'为表格这一列的标识,即dataIndex
    	}
    },
    ....
]

renderData函数

renderData(text,dataSource,index,key){ 
    if(dataSource.length > 0){ 
        //判断上一行该列数据是否一样,这里需要判断是否分页,index % this.pageSize == 0,表示分页后的第一条数据,需要将这条数据与前一页进行合并
        if(index !== 0 && text === dataSource[index - 1][key] && index % this.pageSize != 0){ 
            return 0
        }
        let rowSpan = 1
        //判断下一行是否相等
        for(let i = index + 1;i < dataSource.length;i++){ 
            if(text !== dataSource[i][key]){ 
                break
            }
            rowSpan++
        }
        return rowSpan
    }
}

有其他的方法,要记得来评论区分享哦!!!

点赞