延续保护区段预览详情合并rowspan

src/views/newMap/newMapdraft/dataRelation/routeoperate/protectDetail.vue

@@ -9,7 +9,7 @@
     append-to-body
   >
 
-    <el-table ref="protetTable" border :data="data">
+    <el-table ref="protetTable" border :data="data" :span-method="objectSpanMethod">
       <el-table-column key="1" label="解锁区段" prop="unlockSectionCode" />
       <el-table-column key="2" label="解锁时间(s)" prop="unlockTime" />
       <el-table-column key="3" label="延时保护线路" prop="">
@@ -49,7 +49,8 @@ export default {
         return {
             show: false,
             title: '',
-            data: []
+            data: [],
+            sectionListNumList: []
         };
     },
     computed: {
@@ -61,10 +62,13 @@ export default {
     methods: {
         doShow(data) {
             this.data = [];
+            this.sectionListNumList = [];
             data.relSectionSwitchList.forEach(item => {
                 const unlockSectionName = this.handleRouteOverlapSectionList(item, data.unlockSectionCode);
                 if (item.routeOverlapSwitchList.length) {
+                    this.sectionListNumList.push(item.routeOverlapSwitchList.length);
                     item.routeOverlapSwitchList.forEach( ele => {
+                        this.sectionListNumList.push(0);
                         const column = {
                             unlockSectionCode: unlockSectionName,
                             unlockTime: data.unlockTime,
@@ -75,7 +79,9 @@ export default {
                         this.$convertSpecifiedField(column, this.switchList, 'code', 'name', ['switchCode']);
                         this.data.push(column);
                     } );
+                    this.sectionListNumList.pop();
                 } else {
+                    this.sectionListNumList.push(1);
                     const column = {
                         unlockSectionCode: unlockSectionName,
                         unlockTime: data.unlockTime,
@@ -102,6 +108,26 @@ export default {
         },
         doClose(done) {
             this.show = false;
+        },
+        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+            if (column.property === 'unlockSectionCode' || column.property === 'unlockTime') {
+                if (rowIndex === 0) {
+                    return {
+                        rowspan: this.data.length,
+                        colspan: 1
+                    };
+                } else {
+                    return {
+                        rowspan: 0,
+                        colspan: 0
+                    };
+                }
+            } else if (column.property === 'routeOverlapSectionList') {
+                return {
+                    rowspan: this.sectionListNumList[rowIndex],
+                    colspan: 1
+                };
+            }
         }
     }
 };