同期数据同比，行列表合并

src/views/TQSJ/index.vue

@@ -64,7 +64,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table :data="dataList" height="500px">
+    <el-table :data="dataList" height="500px" :span-method="objectSpanMethod" >
       <el-table-column label="保税区名称" align="center" prop="cbName" width="150px">
         <template slot-scope="scope">
           {{ scope.row.cbName }}
@@ -245,7 +245,8 @@ export default {
       }
       getTQSJ(this.queryParams).then(response => {
         this.dataList = []
-        this.dataList = response.data;
+        // 对字符串数据统一进行排序
+        this.dataList = response.data.sort((a, b) => a.cbName.localeCompare(b.cbName));
         if(this.dataList){
           for (const i in this.dataList[0].datails) {
             this.timeValue.push(this.dataList[0].datails[i].timeValue)
@@ -280,6 +281,31 @@ export default {
     handleQuery() {
       this.getList();
     },
+    objectSpanMethod({ row, column, rowIndex, columnIndex }){
+        //列合并
+        if(columnIndex === 0) { // 只合并第一行
+          if(this.dataList.filter(({ cbName }) => cbName == row.cbName).length > 1 ) { // 只合并相同名字下行数大于1的（废话，不然没有合并的必要）
+            if(rowIndex == this.dataList.findIndex(({cbName}) => cbName == row.cbName )) { // 找到第一个同名的索引，从第一个开始合并，其他隐藏）
+                return { // 合并长度就是数组的长度  宽度是表头的宽度
+                  rowspan: this.dataList.filter(({ cbName }) => cbName == row.cbName).length,
+                  colspan: column.colSpan
+              }
+            }else { // 只保留第一行其他的隐藏
+              return {
+                rowspan: 0,
+                colspan: 0
+              }
+            }
+            
+          }else {
+            return {
+                rowspan: 1,
+                colspan: 1
+              }
+          }
+        }
+
+      },
     /** 重置按钮操作 */
     resetQuery() {
       this.queryParams.cbIdArr = [];