修复缩放滚动问题

src/components/common/scrollBar.vue

@@ -40,9 +40,9 @@ export default {
         const box = document.querySelector('#scrollBox')
         const tb = document.querySelector(`#${this.targetBox}`)
         const tw = document.querySelector(`#${this.targetWrap}`)
-        
+        const zoom = tw.style.zoom?tw.style.zoom:1
         if(box && tb && tw){
-            this.ratio = tw.offsetWidth/tb.offsetWidth
+            this.ratio = (tw.offsetWidth*zoom)/tb.offsetWidth
             this.innerW = `${this.ratio * box.offsetWidth}px`
             this.boxRatio = tb.offsetWidth/box.offsetWidth
         }

src/pages/stuMan/StudentProgress.vue

 <template>
   <!-- <div class="page-body" style="height:calc(100% - 30px);"> -->
   <div class="sptable-box" id="sptable">
-    <div class="sptable-wrap"  id="sptableWrap"  v-loading="loading" :style="{'zoom':zoom}">
-      <table class="sptable">
+    <div class="sptable-wrap" v-loading="loading">
+      <table class="sptable" id="sptableWrap" :style="{'zoom':zoom}">
         <thead>
           <tr class="sticky-header">
             <th class="sticky-column stubg">学员</th>
@@ -80,7 +80,12 @@
         targetBox="sptable"
         targetWrap="sptableWrap"
         @scrollChange="scrollHandle"
+        ref="scrollBar"
       ></scroll-bar>
+      <div class="q-ml-md row items-center">
+        <span>{{ Math.ceil(zoom*100) }}%</span>
+        <q-btn @click="resetZoom" color="primary" v-show="zoom!=1" style="padding: 0; font-size: 11px !important;font-family: microsoft yahei !important; font-weight: 400;" flat label="重置" />
+      </div>
     </div>
   </div>
   <!-- </div> -->
@@ -120,7 +125,6 @@ export default {
   },
   methods: {
     scrollHandle(e) {
-      console.log(e);
       const box = document.querySelector("#sptable");
       box.scrollLeft = e;
     },
@@ -161,7 +165,6 @@ export default {
       if(!this.currentCourse || !this.currentCourse.CourseId) return
       this.loading = true;
       queryScheduleCourseStu({CourseRate:this.currentCourse.CourseRate}).then(r=>{
-        console.log(r.Data)
         this.students = r.Data
         this.loading = false;
         this.assembleHandler()
@@ -178,6 +181,9 @@ export default {
           x.assemble.push(r)
         })
       })
+      this.$nextTick(()=>{
+        this.$refs.scrollBar.calcHandle()
+      })
     },
     handleWheel(event) {
       if(event.ctrlKey === true || event.metaKey === true){
@@ -186,6 +192,7 @@ export default {
         } else {
           this.zoomIn();
         }
+        this.$refs.scrollBar.calcHandle()
         event.preventDefault();
         return false
       }
@@ -198,6 +205,10 @@ export default {
     zoomOut() {
       // 缩小逻辑
       if(this.zoom>0.1) this.zoom-=0.05
+    },
+    resetZoom(){
+      this.zoom=1
+      this.$refs.scrollBar.calcHandle()
     }
   },
   created() {
@@ -218,7 +229,7 @@ export default {
   height: 100%;
   overflow-y: auto;
   padding-bottom: 20px;
-  user-select: none;
+  /* user-select: none; */
   background: #fff;
 }
 .sptable-box .sptable-wrap {