table-scroll

src/views/storeManage/warehouse3D/archivesStorage/index.vue

@@ -89,7 +89,7 @@
           <p class="title-arrow"><svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录</p>
         </h3>
         <el-table
-          ref="table"
+          ref="table2"
           style="min-width: 100%;"
           height="100%"
           :data="tableData"
@@ -112,7 +112,9 @@ export default {
   data() {
     return {
       tableData: [],
-      iframeWin: null
+      iframeWin: null,
+      timer: null, // 定时器id 滚动表格
+      isScroll: false // 是否滚动
     }
   },
   created() {
@@ -126,6 +128,9 @@ export default {
       _this.deviceState()
     }
     window.addEventListener('message', this.handleMessageDevice)
+    this.$nextTick(() => {
+      this.tableRefScroll()
+    })
   },
   methods: {
     // 传入设备状态data  / 给iframe传初始值
@@ -189,6 +194,43 @@ export default {
       } else {
         return ''
       }
+    },
+    // table滚动
+    tableRefScroll() {
+      clearInterval(this.timer) // 清除定时器
+      const table = this.$refs.table // 获取DOM元素
+      const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
+      this.addTableRefScroll(bodyWrapper)
+      // 鼠标移入
+      bodyWrapper.onmouseover = () => {
+        clearInterval(this.timer)
+      }
+      // 鼠标移出
+      bodyWrapper.onmouseout = () => {
+        this.addTableRefScroll(bodyWrapper)
+      }
+    },
+    addTableRefScroll(bodyWrapper) {
+      let scrollTop = bodyWrapper.scrollTop
+      this.timer = setInterval(() => {
+        scrollTop = bodyWrapper.scrollTop
+        bodyWrapper.scrollTop += 5
+        if (scrollTop === bodyWrapper.scrollTop) {
+          if (this.isScroll) {
+            scrollTop = 0
+            bodyWrapper.scrollTop = 0
+          } else {
+            if (this.flag === 1) {
+              this.currentPage++
+              this.handleSearch() // 函数中需要清楚定时器
+            }
+          }
+        }
+      }, 100)
+    },
+    handleSearch() {
+      // 清楚定时器
+      clearInterval(this.timer)
     }
   }
 }

src/views/storeManage/warehouse3D/fullView/index.vue

@@ -45,6 +45,7 @@ export default {
     return {
       tableData: [],
       cameraNameId: null
+
     }
   },
   created() {