新增固定表头

src/components/busManagement/HPTripPlan.vue

@@ -2,23 +2,28 @@
   .tripPlanTab {
     border-collapse: collapse;
     border-radius: 5px;
+    table-layout: fixed;
+    background: white;
   }
 
-  .tripPlanTab tr th,
-  .tripPlanTab tr td {
-    border: 1px solid gray;
-
+  .tripPlanTab tr th {
+    border: 1px solid#d2d2d2;
     text-align: center;
     padding-left: 1px;
     padding-right: 1px;
-  }
-
-  .tripPlanTab tr th {
     min-width: 55px;
     height: 29px;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background:#E6E6E6;
   }
 
   .tripPlanTab tr td {
+    border: 1px solid #d2d2d2;
+    text-align: center;
+    padding-left: 1px;
+    padding-right: 1px;
     height: 28px;
     line-height: 28px;
   }
@@ -64,8 +69,7 @@
       </ul>
     </div>
     <el-tag effect="dark" color="#29b6f6">已制单</el-tag>
-
-    <div style="width:100%;overflow-x:auto;padding-bottom:10px;margin-top:10px;min-height:100px;"
+    <div style="width: 98%; overflow-x: hidden;padding-bottom: 50px; " :style="{height: boxHeight + 'px'}"
       class="ownScrollbarStyle" v-loading="loading">
       <table class="tripPlanTab" v-if="dataList&&dataList.length>0">
         <thead>
@@ -189,6 +193,7 @@
         dialogTitle: "",
         carList: [],
         isHaveAuth: false,
+        boxHeight: 0,
       }
     },
     components: {
@@ -319,6 +324,8 @@
       // this.msg.CarId = 1030;
       //this.msg.CarId = 1021;
       //this.msg.QOrderId="483"
+      let height = window.innerHeight - 65 - 55;
+      this.boxHeight = height;
       this.getCarList();
       this.getList();
     },