在这里插入图片描述

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

如果接口数据没有给相关合并属性,那么需要前端自行处理进行合并,需要自行添加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)
				}
			}
GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐