20250429

src/views/modules/board/VulcanizationDispatchOrder.vue

@@ -20,7 +20,7 @@ export default {
           columnHidden: false,
           columnImage: false,
           columnSortable: false,
-          columnWidth: 38,
+          columnWidth: 30,
           format: null,
           functionId: this.$route.meta.menuId,
           sortLv: 0,
@@ -56,7 +56,7 @@ export default {
           columnHidden: false,
           columnImage: false,
           columnSortable: false,
-          columnWidth: 100,
+          columnWidth: 105,
           format: null,
           functionId: this.$route.meta.menuId,
           sortLv: 0,
@@ -193,6 +193,7 @@ export default {
           align: 'center'
         },
       ],
+      scrollTimer:'',
     }
   },
   methods:{
@@ -204,7 +205,30 @@ export default {
         this.dataList = []
         this.$message.warning(data.msg)
       }
-    }
+    },
+    // 设置自动滚动
+    autoScroll(stop) {
+      const table = this.$refs.scrollTable
+      // 拿到表格中承载数据的div元素
+      const divData = table.$refs.bodyWrapper
+      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
+      if (stop) {
+        //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
+        window.clearInterval(this.scrollTimer)
+      } else {
+        this.scrollTimer = window.setInterval(() => {
+          // 元素自增距离顶部1像素
+          divData.scrollTop += 1
+          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
+          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+            // 重置table距离顶部距离
+            divData.scrollTop = 0
+            // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
+            // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
+          }
+        }, 150) // 滚动速度
+      }
+    },
   },
   created() {
     this.handleQuery();
@@ -212,8 +236,12 @@ export default {
       this.handleQuery();
     },this.setTimeoutDelay)
   },
+  mounted() {
+    this.autoScroll()
+  },
   destroyed() {
     clearInterval(this.refreshTool)
+    this.autoScroll(true)
   }
 }
 </script>
@@ -225,6 +253,7 @@ export default {
       height="100%"
       :data="dataList"
       border
+      ref="scrollTable"
       style="width: 100%">
       <el-table-column
         v-for="(item,index) in columnList" :key="index"