element-ui合并单元格

场景： 

例如一个时间段下对应多行数据，这就不免就涉及到了单元格合并

效果图：

思路：　

1. 为每一个时间段下的 每一行 数据中都添加上对应的时间段数据 

2. 设定一个数组来存放要合并的格数，同时还要设定一个变量来记录，当时间段不同时数据的索引 

3. 遍历表格数据

代码：

//html:
<el-table :data="tableData" border style="width: 100%"  :span-method="objSpan">
	<!--el-table-column-->
</el-table>
//js:
data:function(){
    return{
      	tableData:null,//数据
		
		spanArr: [],
		position: 0,
    }
},
created:function(){
	this.getData()
},
methods:{
	getData:function(){//获取数据	
		let test=[{
			businessDate:'2019-10-5',
			userNum:12,
			consumeMoney:100,
			platIncome:90,
			detial:[
				{
					lotteryId:1,
					lotteryName:'名称01',
					consumeMoney:10,
					platIncome:10,
					probability:'爆率01'
				},
			],
		},{
			businessDate:'2019-10-6',
			userNum:12,
			consumeMoney:100,
			platIncome:90,
			detial:[
				{
					lotteryId:1,
					lotteryName:'名称01',
					consumeMoney:10,
					platIncome:10,
					probability:'爆率01'
				},
				{
					lotteryId:2,
					lotteryName:'名称02',
					consumeMoney:20,
					platIncome:60,
					probability:'爆率02'
				},
			],
		}]
		this.handleData(test);
	},
	handleData:function(list){//处理数据
		//首先需要把数据处理下，把detial的数据提取到外层合并。
		let arr=[]
		for(let i in list){
			let detial=list[i].detial;
			for(let j in detial){
				arr.push({
					businessDate:list[i].businessDate,
					userNum:list[i].userNum,
					consumeMoney:list[i].consumeMoney,
					platIncome:list[i].platIncome,
					//详情
					detial_lotteryId:detial[j].lotteryId,
					detial_lotteryName:detial[j].lotteryName,
					detial_consumeMoney:detial[j].consumeMoney,
					detial_platIncome:detial[j].platIncome,
					detial_probability:detial[j].probability,
				})
			}
		}
		//然后需要将返回的数据按照该字段（businessDate）进行处理。将相同businessDate的信息的索引进行对应存储。
		arr.forEach((item,index) => {
			if( index === 0){
				this.spanArr.push(1);
				this.position = 0;
			}else{
				if(arr[index].businessDate === arr[index-1].businessDate){//日期
					this.spanArr[this.position] += 1;
					this.spanArr.push(0);
				}else{
					this.spanArr.push(1);
					this.position = index;
				}
			}
		})
		this.tableData=arr;
	},
	objSpan:function({row,column, rowIndex, columnIndex}){
		if (columnIndex > 3) {//只合并前4列
			return;
		}
		const _row = this.spanArr[rowIndex];
		const _col = _row>0 ? 1 : 0;
		return {
			rowspan: _row,
			colspan: _col
		}
	},
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6041