修改bug

src/views/OperationalOverview/components/baseTable.vue

@@ -1,47 +1,51 @@
 <!--
  * @Date: 2020-12-14 09:07:03
  * @LastEditors: zhp
- * @LastEditTime: 2024-01-02 16:37:14
+ * @LastEditTime: 2024-01-04 16:16:00
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
  * @Description:
 -->
 <template>
-  <div class="visual-base-table-container">
-    <el-table
-      v-loading="isLoading"
-      :header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}"
-      :row-style="setRowStyle"
-      :data="renderData"
-      border
-      style="height: 100%; width: 100%; background: transparent"
-    >
-      <el-table-column
-        prop="_pageIndex"
-        label="序号"
-        :width="50"
-        align="center"
-      />
-      <el-table-column
-        v-for="item in renderTableHeadList"
-        :key="item.prop"
-        :show-overflow-tooltip="showOverflow"
-        v-bind="item"
-      >
-        <template slot-scope="scope">
 
-          <component
-            :is="item.subcomponent"
-            v-if="item.subcomponent"
-            :inject-data="{...scope.row, ...item}"
-            @emitData="emitData"
-          />
-          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+  <div class="visual-base-table-container scroll_table">
+    <div style="display: inline-block; width: 100%">
+      <el-table class="top" v-loading="isLoading"
+        :header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle"
+        :data="renderData" border style="width: 100%; background: transparent">
+        <el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
+        <el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
+          v-bind="item">
+          <template slot-scope="scope">
 
-        </template>
-      </el-table-column>
-      <slot name="content" />
-    </el-table>
+            <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
+              @emitData="emitData" />
+            <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+
+          </template>
+        </el-table-column>
+        <slot name="content" />
+      </el-table>
+      <vue-seamless-scroll :data="renderData" class="seamless-warp" style="width: 100%" :class-option="classOption">
+        <el-table class="bottom" v-loading="isLoading"
+          :header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle"
+          :data="renderData" border style="width: 100%; background: transparent">
+          <el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
+          <el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
+            v-bind="item">
+            <template slot-scope="scope">
+
+              <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
+                @emitData="emitData" />
+              <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+
+            </template>
+          </el-table-column>
+          <slot name="content" />
+        </el-table>
+      </vue-seamless-scroll>
+    </div>
   </div>
+
 </template>
 <script>
 import { isObject, isString } from 'lodash'
@@ -109,7 +113,19 @@ export default {
       return this.tableConfig.filter((item, index) => {
         return this.selectedBox[index]
       })
-    }
+    },
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
   },
   beforeMount() {
     this.selectedBox = new Array(100).fill(true)
@@ -171,16 +187,23 @@ export default {
     background-color: rgba(79,114,136,0.29) !important;
   }
 }
-// .setting {
-//   text-align: right;
-//   padding: 15px;
-//   .setting-box {
-//     width: 100px;
-//   }
-//   i {
-//     color: #aaa;
-//     @extend .pointer;
-//   }
-// }
+</style>
+
+<style lang="scss">
+ .seamless-warp {
+  height: 308px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+ .top  .el-table__body-wrapper {
+  display: none;
+}
+ .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+}
 
 </style>