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

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

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

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

2、处理请求来的数据

js 复制代码
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
}
相关推荐
嘉琪0012 分钟前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
南岸月明7 分钟前
我与技术无缘,只想副业搞钱
前端
liu_yueyang9 分钟前
JavaScript VMP (Virtual Machine Protection) 分析与调试
开发语言·javascript·ecmascript
gzzeason34 分钟前
在HTML中CSS三种使用方式
前端·css·html
hnlucky1 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin1 小时前
前端八股-promise
前端·javascript
星语卿1 小时前
浏览器重绘与重排
前端·浏览器
西瓜_号码1 小时前
React中Redux基础和路由介绍
javascript·react.js·ecmascript
小小小小宇1 小时前
前端实现合并两个已排序链表
前端
yngsqq2 小时前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#