elementUI中表格行合并的使用

1、html布局

	<el-table
		v-loading="loading"
		tooltip-effect="dark"
		class="custom"
		border
		ref="floodControlOrganizationTable"
		height="100%"
		:data="tableData"
		style="width: 100%"
		:row-class-name="highLightRow"
		@selection-change="selectionChange"
		@row-click="rowClick"
		:span-method="objectSpanMethod">
		<el-table-column type="selection"></el-table-column>
		<el-table-column
			width="80"
			align="center"
			type="index"
			label="序号"
			show-overflow-tooltip>
		</el-table-column>
		<el-table-column
			prop="streetName"
			align="center"
			label="所属街道"
			show-overflow-tooltip>
		</el-table-column>
		<el-table-column
			prop="orgnName"
			align="center"
			label="组织机构（架构）名称"
			show-overflow-tooltip>
		</el-table-column>
		<el-table-column
			prop="orgnDutyExplain"
			align="center"
			label="机构主要职责说明"
			show-overflow-tooltip>
		</el-table-column>
		<el-table-column
			align="center"
			label="附件"
			show-overflow-tooltip>
			<template slot-scope="scope">
				<p v-for="(item,index) in scope.row.fileVOList" :key="index">
					<a :href="staticFileUrl + item.fileNewName" target="_blank">
						{{item['fileOldName']}}
					</a>
				</p>
				<span v-if="!scope.row.fileVOList || scope.row.fileVOList.length===0">暂无附件</span>
			</template>
		</el-table-column>
		<el-table-column
			prop="headName"
			align="center"
			label="主要负责人"
			show-overflow-tooltip>
		</el-table-column>
		<el-table-column
			prop="headPosition"
			align="center"
			label="职务"
			show-overflow-tooltip>
		</el-table-column>
		<el-table-column
			prop="memberName"
			align="center"
			label="成员"
			show-overflow-tooltip>
		</el-table-column>
		<el-table-column
			prop="memberPosition"
			align="center"
			label="职务"
			show-overflow-tooltip>
		</el-table-column>
	</el-table>
</div>

2、数据合并前整形方法

// 数据合并前整形
getListDataForRowAndColumn(data) {
	let self = this;
	// 街道
	self.streetArr = [];
	// 组织
	self.orgArr = [];
	for (var i = 0; i < data.length; i++) {
		if (i === 0) {
			// 如果是第一条记录（即索引是0的时候），向数组中加入１
			self.streetArr.push(1);
			self.pos = 0;
			self.orgArr.push(1);
			self.posT = 0;
		} else {
			if (data[i].streetId === data[i - 1].streetId) {
				// 如果streetId相等就累加，并且push 0
				self.streetArr[self.pos] += 1;
				self.streetArr.push(0);
				if (data[i].orgnName === data[i - 1].orgnName) {
					self.orgArr[self.posT] += 1;
					// 如果orgnName相等就累加，并且push 0
					self.orgArr.push(0);
				} else {
					self.orgArr.push(1);
					self.posT = i;
				}
			} else {
				// 不相等push 1
				self.streetArr.push(1);
				self.pos = i;
				self.orgArr.push(1);
				self.posT = i;
			}
		}
	}
},

3、合并行方法

// 合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	let self = this;
	switch(columnIndex){
		case 2:
			if (self.streetArr[rowIndex]) {
				let roomNum = self.streetArr[rowIndex];
				return {
					rowspan: roomNum,
					colspan: roomNum > 0 ? 1 : 0
				}
			}
			return {
				rowspan: 0,
				colspan: 0
			}
		case 0:
		case 3:
		case 4:
		case 5:
		case 6:
		case 7:
			if (self.orgArr[rowIndex]) {
				let roomNum = self.orgArr[rowIndex];
				return {
					rowspan: roomNum,
					colspan: roomNum > 0 ? 1 : 0
				}
			}
			return {
				rowspan: 0,
				colspan: 0
			}
	}
},

4、最终效果如图所示