vue3 +前端实现单元格合并

如果后端接口返回的数据直接给定相关合并的属性，那么直接使用即可，不需要以下方法。

如果接口数据没有给相关合并属性，那么需要前端自行处理进行合并，需要自行添加rowSpan属性（实现上图样式）代码如下：(只把修改数据的方法展示出来，开发中根据实际需要的数据格式进行修改)

const columns = [
{
			title: '日志分类',
			dataIndex: 'logType',
			customCell: (_, index) => {
				if (_.rowSpan > 0) {  
					return { rowSpan: _.rowSpan }
				} else {
					return { rowSpan: 0 }
				}
			}
		},
]

1、数据无序（需要合并的数据没有挨着）

//假数据
let a = {
				pages: 1,
				records: [
					{
						id: '1',
						logType: '设备分类1',
						logTypeChild: 'CPU',
						orgId: null,
						ruleNo: '9999'
					},
					{
						id: '2',
						logType: '设备分类2',
						logTypeChild: 'CPU',
						orgId: null,
						ruleNo: '9999'
					},
					{
						id: '3',
						logType: '设备分类4',
						logTypeChild: 'CPU',
						orgId: null,
						ruleNo: '9999'
					},
					{
						id: '4',
						logType: '设备分类2',
						logTypeChild: 'CPU',
						orgId: null,
						ruleNo: '9999'
					},
					{
						id: '5',
						logType: '设备分类2',
						logTypeChild: 'CPU',
						orgId: null,
						ruleNo: '9999'
					}
				],
				total: 5
			}
			let newData = [] //如果数据顺序错乱，newData 这个步骤可以调整顺序
			for (let i = 0; i < a.records.length; i++) {
				let num = 0
				let flag = true
				if (newData.length > 0) {  //判断是否已经添加
					for (let k = 0; k < newData.length; k++) {
						if (newData[k].id == a.records[i].id) {
							flag = false
						}
					}
				}
				if (flag) {
					num++ //为了让不需要合并的单元格rowspan=1
					newData.push(a.records[i]) 
				}
				for (let j = i + 1; j < a.records.length; j++) {
					if (a.records[j].logType == a.records[i].logType && !a.records[i].hasOwnProperty('rowSpan')) {
						num++
						Reflect.set(a.records[j], 'rowSpan', 0) //需要合并的rowspan都是0
						newData.push(a.records[j])
					}
				}
				Reflect.set(a.records[i], 'rowSpan', num) 
				//注意：push()方法是浅拷贝，record[i]修改，newData自动修改
				//newData[i]=a.records[i]
			}
			a.records = newData

2、数据有序（需要合并的数据挨着）

//类似这样
records: [
					{
						id: '1',
						logType: '设备分类1',
						logTypeChild: 'CPU1',
						orgId: null,
						ruleNo: '9999'
					},
					{
						id: '2',
						logType: '设备分类2',
						logTypeChild: 'CPU2',
						orgId: null,
						ruleNo: '9999'
					},
					{
						id: '3',
						logType: '设备分类2',
						logTypeChild: 'CPU3',
						orgId: null,
						ruleNo: '9999'
					},
					{
						id: '4',
						logType: '设备分类5',
						logTypeChild: 'CPU4',
						orgId: null,
						ruleNo: '9999'
					},
					{
						id: '5',
						logType: '设备分类5',
						logTypeChild: 'CPU5',
						orgId: null,
						ruleNo: '9999'
					}

			for (let i = 0; i < a.records.length; i++) {
				let num = 1 //为了区分被合并项，需要初始为1	
				for (let j = i + 1; j < a.records.length; j++) {
					if (a.records[j].logType == a.records[i].logType && !a.records[i].hasOwnProperty('rowSpan')) {
						num++
						Reflect.set(a.records[j], 'rowSpan', 0)
					}
				}
				if (!a.records[i].hasOwnProperty('rowSpan')) { //这个判断必不可少，防止已经存在rowSpan=0的数据被改
					Reflect.set(a.records[i], 'rowSpan', num)
				}
			}