ant-design-vue中table某一列进行合并

ant-design-vue中table某一列进行合并

1、在colums中配置自定义渲染

{
	title: '区域',
	dataIndex: 'cityName',
	key: 'cityName',
	align: 'center',
	width: 120,
	customCell: (record, rowIndex, column) => {
		return {
			rowSpan: record.rowSpan
		}
	}
},

2、处理请求来的数据

tableData.dataSource = processTableData(res?.data)
const processTableData = (data) => {
	let result = []
	let i = 0
	while (i < data?.length) {
		const currentItem = data[i]
		let rowSpan = 1
		while (i + rowSpan < data.length && data[i + rowSpan].cityName === currentItem.cityName) {
			rowSpan++
		}
		result.push({
			...currentItem,
			rowSpan
		})
		for (let j = 1; j < rowSpan; j++) {
			result.push({
				...data[i + j],
				rowSpan: 0
			})
		}
		i += rowSpan
	}
	return result
}