GFRS-2547金掌桂的首页的【业务报表】功能页面，pc适配问题，首列使用 position: sticky;属性后，列不能合并单元格

src/views/ebiz/report/reportDetail.vue

@@ -1,7 +1,100 @@
 <template>
-  <div class="report-list-container">
+  <div>
-    <div class="all mt15" v-if="!special">
+    <!-- 适用于移动端 -->
-      <div>
+    <div v-if="isMobile" class="report-detail-container">
+      <div class="all mt15" v-if="!special">
+        <div>
+          <table class="move-table" cellspacing="0" cellpadding="0" border="0">
+            <tr>
+              <th>{{ this.title | filterTitle }}</th>
+              <th>当日预收件数</th>
+              <th>当日预收规模保费（万元）</th>
+              <th>当日承保件数</th>
+              <th>当日承保规模保费（万元）</th>
+              <th>当日承保标准保费（万元）</th>
+            </tr>
+            <tr v-for="(item, index) in reportList" :key="index">
+              <td v-if="item.manageComName != null">{{ item.manageComName }}</td>
+              <td v-else-if="item.riskName != null">{{ item.riskName }}</td>
+              <td v-else>{{ item.sellTypeName }}</td>
+              <td>{{ item.preItems }}</td>
+              <td>{{ item.prePrem }}</td>
+              <td>{{ item.items }}</td>
+              <td>{{ item.prem }}</td>
+              <td>{{ item.standPrem }}</td>
+            </tr>
+          </table>
+        </div>
+
+        <div class="l">
+          <table border="0" cellspacing="0" cellpadding="0" class="fixed-l">
+            <tr>
+              <th>{{ this.title | filterTitle }}</th>
+            </tr>
+            <tr v-for="(item, index) in reportList" :key="index">
+              <td v-if="item.manageComName != null">{{ item.manageComName }}</td>
+              <td v-else-if="item.salechnlName != null">{{ item.salechnlName }}</td>
+              <td v-else-if="item.riskName != null">{{ item.riskName }}</td>
+              <td v-else>{{ item.sellTypeName }}</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div v-else class="container pt15">
+        <div class="wrapper">
+          <table class="special" cellspacing="0" cellpadding="0" border="0">
+            <tr>
+              <th style="width: 8em;">合作渠道</th>
+              <th>险种名称</th>
+              <th>当日预收件数</th>
+              <th>当日预收规模保费（万元）</th>
+              <th>当日承保件数</th>
+              <th>当日承保规模保费（万元）</th>
+              <th>当日承保标准保费（万元）</th>
+            </tr>
+            <tr v-for="(item, index) in companyData" :key="index">
+              <td v-if="item.rowspan" :rowspan="item.rowspan ? item.rowspan : ''">
+                {{ item.salechnlName }}
+              </td>
+              <td>{{ item.riskName }}</td>
+              <td>{{ item.preItems }}</td>
+              <td>{{ item.prePrem }}</td>
+              <td>{{ item.items }}</td>
+              <td>{{ item.prem }}</td>
+              <td>{{ item.standPrem }}</td>
+            </tr>
+          </table>
+        </div>
+        <div class="table2 mt15" style="width: 8em;">
+          <table class="special" cellspacing="0" cellpadding="0" border="0">
+            <tr>
+              <th style="width: 8em; background: #fff;">合作渠道</th>
+              <th>险种名称</th>
+              <th>当日预收件数</th>
+              <th>当日预收规模保费（万元）</th>
+              <th>当日承保件数</th>
+              <th>当日承保规模保费（万元）</th>
+              <th>当日承保标准保费（万元）</th>
+            </tr>
+
+            <tr v-for="(item, index) in companyData" :key="index">
+              <td v-if="item.rowspan" :rowspan="item.rowspan ? item.rowspan : ''">
+                {{ item.salechnlName }}
+              </td>
+              <td>{{ item.riskName }}</td>
+              <td>{{ item.preItems }}</td>
+              <td>{{ item.prePrem }}</td>
+              <td>{{ item.items }}</td>
+              <td>{{ item.prem }}</td>
+              <td>{{ item.standPrem }}</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </div>
+    <!-- 适用于pc端 -->
+    <div v-else class="main">
+      <div v-if="!special" class="mt15">
         <table class="move-table" cellspacing="0" cellpadding="0" border="0">
           <tr>
             <th>{{ this.title | filterTitle }}</th>
@@ -23,24 +116,8 @@
           </tr>
         </table>
       </div>
-
+      <div v-else>
-      <div class="l">
+        <table cellspacing="0" cellpadding="0" border="0">
-        <table border="0" cellspacing="0" cellpadding="0" class="fixed-l">
-          <tr>
-            <th>{{ this.title | filterTitle }}</th>
-          </tr>
-          <tr v-for="(item, index) in reportList" :key="index">
-            <td v-if="item.manageComName != null">{{ item.manageComName }}</td>
-            <td v-else-if="item.salechnlName != null">{{ item.salechnlName }}</td>
-            <td v-else-if="item.riskName != null">{{ item.riskName }}</td>
-            <td v-else>{{ item.sellTypeName }}</td>
-          </tr>
-        </table>
-      </div>
-    </div>
-    <div v-else class="container pt15">
-      <div class="wrapper">
-        <table class="special" cellspacing="0" cellpadding="0" border="0">
           <tr>
             <th style="width: 8em;">合作渠道</th>
             <th>险种名称</th>
@@ -63,37 +140,13 @@
           </tr>
         </table>
       </div>
-      <div class="table2 mt15" style="width: 8em;">
-        <table class="special" cellspacing="0" cellpadding="0" border="0">
-          <tr>
-            <th style="width: 8em; background: #fff;">合作渠道</th>
-            <th>险种名称</th>
-            <th>当日预收件数</th>
-            <th>当日预收规模保费（万元）</th>
-            <th>当日承保件数</th>
-            <th>当日承保规模保费（万元）</th>
-            <th>当日承保标准保费（万元）</th>
-          </tr>
-
-          <tr v-for="(item, index) in companyData" :key="index">
-            <td v-if="item.rowspan" :rowspan="item.rowspan ? item.rowspan : ''">
-              {{ item.salechnlName }}
-            </td>
-            <td>{{ item.riskName }}</td>
-            <td>{{ item.preItems }}</td>
-            <td>{{ item.prePrem }}</td>
-            <td>{{ item.items }}</td>
-            <td>{{ item.prem }}</td>
-            <td>{{ item.standPrem }}</td>
-          </tr>
-        </table>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { List, Tab, Tabs, Tag, Row, Col, Sticky } from 'vant'
+import utils from '@/assets/js/business-common'
 
 export default {
   name: 'reportDetail',
@@ -112,7 +165,8 @@ export default {
       title: '',
       special: false,
       company: null,
-      companyData: []
+      companyData: [],
+      isMobile: null
     }
   },
   beforeRouteLeave(to, from, next) {
@@ -120,6 +174,12 @@ export default {
     next()
   },
   mounted() {
+    //  判断设备是移动端还是pc
+    let flag = navigator.userAgent.match(
+      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+    )
+    this.isMobile = flag == null ? false : true
+
     let special = localStorage.getItem('special')
     if (special) {
       document.title = '中介渠道'
@@ -225,101 +285,139 @@ export default {
 </script>
 <style lang="scss" scoped>
 $border: 1px solid #d7d7d7;
-
+// 合作渠道--表二样式
-table.special {
+.report-detail-container {
-  border-collapse: collapse;
+  table.special {
-  text-align: center;
+    border-collapse: collapse;
-  border: 1px solid #d7d7d7;
+    text-align: center;
-  width: 60em;
+    border: 1px solid #d7d7d7;
-}
+    width: 60em;
-
-.table2 {
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: #fff;
-  border-right: $border;
-}
-* {
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.wrapper {
-  overflow-x: scroll;
-}
-
-.container {
-  width: 100vw;
-  position: relative;
-  background-color: #fff;
-  min-height: 100vh;
-  tr,
-  th,
-  td {
-    padding: 1em 0.25em;
   }
-  th,
+
-  td {
+  .table2 {
-    border: $border;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #fff;
+    border-right: $border;
+  }
+  * {
+    box-sizing: border-box;
+    font-size: 14px;
+  }
+
+  .wrapper {
+    overflow-x: scroll;
+  }
+
+  .container {
+    width: 100vw;
+    position: relative;
+    background-color: #fff;
+    min-height: 100vh;
+    tr,
+    th,
+    td {
+      padding: 1em 0.25em;
+    }
+    th,
+    td {
+      border: $border;
+    }
+  }
+
+  // 表一样式
+  .all {
+    overflow-x: scroll;
+    height: 100%;
+  }
+  .report-list-container {
+    position: relative;
+  }
+  .all .move-table,
+  .fixed-l {
+    background-color: #ffffff;
+    width: 100px;
+  }
+  .fixed-l th:nth-child(1),
+  .fixed-l th:nth-child(2),
+  .fixed-l th:nth-child(4),
+  .all .move-table th:nth-child(1),
+  .all .move-table th:nth-child(2),
+  .all .move-table th:nth-child(4),
+  .fixed-l td:nth-child(1),
+  .fixed-l td:nth-child(2),
+  .fixed-l td:nth-child(4),
+  .all .move-table td:nth-child(1),
+  .all .move-table td:nth-child(2),
+  .all .move-table td:nth-child(4) {
+    width: 130px;
+    text-align: center;
+    border: 1px solid #d7d7d7;
+    min-width: 130px;
+    max-width: 130px;
+  }
+
+  .fixed-l th,
+  .all .move-table th,
+  .fixed-l td,
+  .all .move-table td {
+    width: 200px;
+    text-align: center;
+    border: 1px solid #d7d7d7;
+    min-width: 200px;
+    max-width: 200px;
+  }
+  .all .move-table th,
+  .fixed-l th {
+    height: 80px;
+  }
+  .all .move-table td,
+  .fixed-l td {
+    height: 60px;
+  }
+
+  .l {
+    position: absolute;
+    z-index: 5;
+    top: 15px;
+    left: 0;
   }
 }
 
-.all {
+// 适配PC端样式
-  overflow-x: scroll;
+.main {
-  height: 100%;
+  // width: 500px;
-}
+  // overflow: auto;
-.report-list-container {
+  // height: 208px; /* 设置固定高度 */
-  position: relative;
+  td,
-}
+  th {
-.all .move-table,
+    /* 设置td,th宽度高度 */
-.fixed-l {
+    border: 1px solid gray;
-  background-color: #ffffff;
+    width: 100px;
-  width: 100px;
+    height: 30px;
-}
+    text-align: center;
-.fixed-l th:nth-child(1),
+  }
-.fixed-l th:nth-child(2),
-.fixed-l th:nth-child(4),
-.all .move-table th:nth-child(1),
-.all .move-table th:nth-child(2),
-.all .move-table th:nth-child(4),
-.fixed-l td:nth-child(1),
-.fixed-l td:nth-child(2),
-.fixed-l td:nth-child(4),
-.all .move-table td:nth-child(1),
-.all .move-table td:nth-child(2),
-.all .move-table td:nth-child(4) {
-  width: 130px;
-  text-align: center;
-  border: 1px solid #d7d7d7;
-  min-width: 130px;
-  max-width: 130px;
-}
 
-.fixed-l th,
+  table {
-.all .move-table th,
+    table-layout: fixed;
-.fixed-l td,
+    // width: 200px; /* 固定宽度 */
-.all .move-table td {
+  }
-  width: 200px;
+  td:first-child,
-  text-align: center;
+  th:first-child {
-  border: 1px solid #d7d7d7;
+    position: sticky;
-  min-width: 200px;
+    left: 0; /* 首行永远固定在左侧 */
-  max-width: 200px;
+    z-index: 1;
-}
+    // background-color: lightpink;
-.all .move-table th,
+  }
-.fixed-l th {
+  thead tr th {
-  height: 80px;
+    position: sticky;
-}
+    top: 0; /* 列首永远固定在头部  */
-.all .move-table td,
+  }
-.fixed-l td {
+  th:first-child {
-  height: 60px;
+    z-index: 2;
-}
+    // background-color: lightblue;
-
+  }
-.l {
-  position: absolute;
-  z-index: 5;
-  top: 0;
-  left: 0;
 }
 </style>