合并单元格

src/App.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<el-table :data="tableData" size="mini" border>
+		<el-table :data="tableData" size="mini" border :span-method="objectSpanMethod">
 			<el-table-column label="序号" width="60" align="center" fixed>
 				<template slot-scope="scope">
 					<span>{{ queryParams.page_index * queryParams.page_size + scope.$index + 1 }}</span>
@@ -57,13 +57,13 @@
 			<!-- 末端列 Begin -->
 			<el-table-column label="末端控制器" align="center" width="60">
 				<el-table-column prop="end_order" label="编号" align="center" width="60" />
-				<el-table-column prop="end_exception_num" label="通讯异常数量" align="center" width="80" />
-				<el-table-column prop="end_min_temp" label="最低室内温度(℃)" align="center" width="80" />
-				<el-table-column prop="end_min_humidity" label="最低室内湿度(℃)" align="center" width="100" />
-				<el-table-column prop="end_min_dew_point" label="最低室内露点(℃)" align="center" width="100" />
-				<el-table-column prop="end_max_temp" label="最高室内温度(℃)" align="center" width="80" />
-				<el-table-column prop="end_max_humidity" label="最高室内湿度(℃)" align="center" width="80" />
-				<el-table-column prop="end_max_dew_point" label="最高室内露点(℃)" align="center" width="80" />
+				<el-table-column prop="end_exception_num" label="通讯异常数量" align="center" width="120" />
+				<el-table-column prop="end_min_temp" label="最低室内温度(℃)" align="center" width="120" />
+				<el-table-column prop="end_min_humidity" label="最低室内湿度(℃)" align="center" width="120" />
+				<el-table-column prop="end_min_dew_point" label="最低室内露点(℃)" align="center" width="120" />
+				<el-table-column prop="end_max_temp" label="最高室内温度(℃)" align="center" width="120" />
+				<el-table-column prop="end_max_humidity" label="最高室内湿度(℃)" align="center" width="120" />
+				<el-table-column prop="end_max_dew_point" label="最高室内露点(℃)" align="center" width="120" />
 			</el-table-column>
 			<!-- 末端列 End -->
 		</el-table>
@@ -124,6 +124,8 @@ export default {
 					this.total = result.count;
 					// 展开所有项目下的设备及单机
 					this.tableData = this.expandAllNodes(result.data || []);
+					let dataSolve = this.mergeTableRow(this.tableData,["projectName","boxName"]);
+					this.tableData = dataSolve;
 					console.log('>>> tableData: ', this.tableData);
 				})
 				.catch(err => {
@@ -177,36 +179,66 @@ export default {
 			this.queryParams.page_index = val;
 			this.getProjects();
 		},
-		arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-			if (rowIndex % 2 === 0) {
-				if (columnIndex === 0) {
-					return [1, 2];
-				} else if (columnIndex === 1) {
-					return [0, 0];
-				}
+		// 合并表格
+		mergeTableRow(data,merge){
+			if(!merge || merge.length === 0) {
+				return data;
 			}
+			merge.forEach((m) => {
+				const mList = {};
+				let spliceLocation = merge.indexOf(m);
+				data = data.map((v,index) => {
+					const rowVal = v[m];
+					if(mList[rowVal] && mList[rowVal].newIndex === index){
+						let flag = false;
+						let mergeSolve = merge.slice(0, spliceLocation);
+						mergeSolve.slice(0, spliceLocation).forEach(mergeItem => {
+							if (data[index][mergeItem] == data[index - 1][mergeItem]) {
+								flag = true
+							}
+						})
+						if (m == merge[0]) {
+							flag = true;
+						}
+						if (flag) {
+							mList[rowVal]["num"]++;
+							mList[rowVal]["newIndex"]++;
+							data[mList[rowVal]["index"]][m + "-span"].rowspan++;
+							v[m + "-span"] = {
+								rowspan: 0,
+								colspan: 0,
+							};
+						} else {
+							mList[rowVal] = {
+								num: 1,
+								index: index,
+								newIndex: index + 1,
+							};
+							v[m + "-span"] = {
+								rowspan: 1,
+								colspan: 1,
+							};
+						}
+					}else {
+						mList[rowVal] = {
+							num: 1,
+							index: index,
+							newIndex: index + 1,
+						};
+						v[m + "-span"] = {
+							rowspan: 1,
+							colspan: 1,
+						};
+					}
+					return v;
+				});
+			});
+			return data;
 		},
 		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-			//1列
-			if (columnIndex === 0) {
-				return {
-					rowspan: 1,
-					colspan: 1
-				};
-			} else if (columnIndex === 1) {
-				//2列
-				//第一行
-				if (rowIndex == 0) {
-					return {
-						rowspan: 2,
-						colspan: 1
-					};
-				} else {
-					return {
-						rowspan: 0,
-						colspan: 0
-					};
-				}
+			const span = column["property"] + "-span";
+			if(row[span]) {
+				return row[span];
 			}
 		}
 	}