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

src/views/ebiz/report/reportDetail.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="report-list-container">
+  <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">
@@ -90,10 +92,61 @@
         </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>
+            <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 v-else>
+        <table 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>
+  </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,7 +285,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 $border: 1px solid #d7d7d7;
-
+// 合作渠道--表二样式
+.report-detail-container {
   table.special {
     border-collapse: collapse;
     text-align: center;
@@ -266,6 +327,7 @@ table.special {
     }
   }
 
+  // 表一样式
   .all {
     overflow-x: scroll;
     height: 100%;
@@ -319,7 +381,43 @@ table.special {
   .l {
     position: absolute;
     z-index: 5;
-  top: 0;
+    top: 15px;
     left: 0;
   }
+}
+
+// 适配PC端样式
+.main {
+  // width: 500px;
+  // overflow: auto;
+  // height: 208px; /* 设置固定高度 */
+  td,
+  th {
+    /* 设置td,th宽度高度 */
+    border: 1px solid gray;
+    width: 100px;
+    height: 30px;
+    text-align: center;
+  }
+
+  table {
+    table-layout: fixed;
+    // width: 200px; /* 固定宽度 */
+  }
+  td:first-child,
+  th:first-child {
+    position: sticky;
+    left: 0; /* 首行永远固定在左侧 */
+    z-index: 1;
+    // background-color: lightpink;
+  }
+  thead tr th {
+    position: sticky;
+    top: 0; /* 列首永远固定在头部  */
+  }
+  th:first-child {
+    z-index: 2;
+    // background-color: lightblue;
+  }
+}
 </style>