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
}
相关推荐
从零开始学习人工智能2 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
虫虫rankourin2 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
小刘鸭地下城3 小时前
Web安全必备:关键 HTTP 标头解析
前端
yddddddy3 小时前
html基本知识
前端·html
不要再敲了3 小时前
JavaScript与jQuery:从入门到面试的完整指南
javascript·面试·jquery
荣达3 小时前
koa洋葱模型理解
前端·后端·node.js
xiaoyan20154 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation4 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation4 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
李明卫杭州4 小时前
JavaScript中的dispatchEvent方法详解
javascript