Ant Design of Vue表格合并行的小问题

需求：
需要把图一改为图二，即把第三列中的前五行数据合并成一个，后四行的数据合并成一个。


代码：

{
	title: '废气/废水排放量',
	align: 'center',
	children: [{
		title: '气（m³）水（吨）',
		align: 'center',
		dataIndex: 'total',
		key: 'total',
		customRender: (value, row, index) => {
			const obj = {
				children: value,
				attrs: {},
			};
			if (index === 0) {
				obj.attrs.rowSpan = 5;
			}
			if (index === 1) {
				obj.attrs.rowSpan = 0;
			}
			if (index === 2) {
				obj.attrs.rowSpan = 0;
			}
			if (index === 3) {
				obj.attrs.rowSpan = 0;
			}
			if (index === 4) {
			 obj.attrs.rowSpan = 0;
			}
			if (index === 5) {
				obj.attrs.rowSpan = 4;
			}
			if (index === 6) {
				obj.attrs.rowSpan = 0;
			}
			if (index === 7) {
				obj.attrs.rowSpan = 0;
			}
			if (index === 8) {
				obj.attrs.rowSpan = 0;
			}
			return obj;
		},
	}, ],
},

问题：

问题：数据没有了，原因是rowSpan只会向下合并，我上面的代码是把第三列第一行的单元格拉长到五格，覆盖掉了原本在第四行上的数据，所以出现了合并成功，但数据不显示的问题。
解决方案：
既然合并只能显示第一行的数据，就把该放的数据放到第一行，就可以显示了。
代码修改：在从接口获取数据处添加如下代码

for(let i in this.data){
	if(this.data[i].polluteName=='废气流量'){
		this.data[0].total = this.data[i].cumemission;
	}
	if(this.data[i].polluteName=='污水流量'){
		this.data[5].total = this.data[i].cumemission;
	}
}

由于组件限制合并行不能随心所欲，以上方法可以解决问题，但说起来不太好，逻辑有些问题。