表格滚动封装和调用

src/store/modules/public.js

@@ -212,6 +212,45 @@ const useStore = defineStore("public", {
                 document.getElementsByClassName("mapTips_type")[0].style.right = "7.2rem"
             }
         },
+
+
+
+         /**
+         * @table设置自动滚动
+         * @鼠标移入移除事件
+         */
+         autoScroll(stop,element) {
+
+            window.clearInterval(this.scrolltimer)
+            
+            // 拿到表格中承载数据的div元素
+            const divData = document.getElementsByClassName('el-table__body-wrapper');
+
+            // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
+            if (stop) {
+                //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
+                window.clearInterval(this.scrolltimer)
+            } else {
+                this.scrolltimer = window.setInterval(() => {
+
+                    Array.prototype.forEach.call(divData, function (element) {
+                        // 元素自增距离顶部1像素
+                        element.scrollTop += 1
+                        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
+                        if (element.clientHeight + Math.round(element.scrollTop) == element.scrollHeight) {
+                            // 重置table距离顶部距离
+                            element.scrollTop = 0
+                            // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
+                            // element.scrollTop = element.scrollTop - element.scrollHeight / 2
+                        }
+
+                    })
+                }, 150) // 滚动速度
+            }
+            
+        },
+
+
         /**
          * @街镇切换事件
          * @param {*} context

src/views/enforcement-dynamic.vue

@@ -87,6 +87,8 @@
                             class="transparentTableRow"
                             height="100%"
                             v-if="check == '1'"
+                            @mouseenter="stores.autoScroll(true)"
+                        @mouseleave="stores.autoScroll(false)"
                         >
                             <el-table-column
                                 v-for="item in tableHeaderList1"
@@ -679,8 +681,10 @@ export default {
     components: { category, wordCloud, liquidFill },
 
     created() {
-        
         this.getData();
+        setTimeout(()=>{
+            this.stores.autoScroll(false)
+        },1000)
     },
     mixins: [linstener, map],
     computed: {

src/views/self-management.vue

@@ -47,7 +47,7 @@
                                 {{ checkTable.name }}：<span>{{ checkTable.total }}</span
                                 >分
                             </p>
-                            <el-table :data="checkTable.data" class="transparentTableRow" height="100%" :cell-class-name="tableRowClassName">
+                            <el-table :data="checkTable.data" class="transparentTableRow" height="100%" :cell-class-name="tableRowClassName" >
                                 <el-table-column align="left" label="名称" prop="name"></el-table-column>
                                 <el-table-column align="left" label="评分" width="50" prop="value"></el-table-column>
                                 <el-table-column align="left" label="评分标准" prop="describe"></el-table-column>
@@ -491,7 +491,10 @@
                     <h4 v-if="!stroes.$state.streetTown">各街镇物联动态</h4>
 
                     <div class="rightBotContent" v-if="!stroes.$state.streetTown">
-                        <el-table ref="table" height="100%" :data="streetDynamicData" class="transparentTableRow" style="width: 100%">
+                        <el-table ref="reportTable" height="100%" :data="streetDynamicData" class="transparentTableRow " style="width: 100%"  
+                        @mouseenter="stores.autoScroll(true)"
+                        @mouseleave="stores.autoScroll(false)"
+                            >
                             <el-table-column v-for="item in streetDynamicHeaderData" :key="item.prop" :prop="item.prop" align="center" :label="item.name">
                                 <template #default="scope">
                                     <el-tooltip placement="left" trigger="click">
@@ -531,6 +534,7 @@
                                 </template>
                             </el-table-column>
                         </el-table>
+                      
                     </div>
 
                     <div style="display: flex" v-if="stroes.$state.streetTown">
@@ -1561,6 +1565,9 @@ export default {
 
     created() {
         this.getData();
+        setTimeout(()=>{
+                this.stores.autoScroll(false)
+        },3000)
     },
     mounted() {
         this.initMap();
@@ -1580,7 +1587,7 @@ export default {
             true
         );
     },
-    methods: {
+    methods: { 
         /**
          * 评分等级切换
          * @param {*} id
@@ -1749,15 +1756,10 @@ export default {
 
                 // 每分钟滚动一次
                 setInterval(()=>{
-                    let itemArr = [];
-                    normalData.map(item => {
-                            itemArr.push({
-                                name: item.name,
-                                value: 0,
-                                mark:'家'
-                            });
-                    });
-                    this.enterpriseAutonomyList.scoreList = itemArr
+                    this.enterpriseAutonomyList.scoreList=[{ name: "高风险数", value: 0, mark: "家" },
+                    { name: "较高风险数", value: 0, mark: "家" },
+                    { name: "一般风险数", value: 0, mark: "家" },
+                    { name: "低风险数", value: 0, mark: "家" },]
                 },6000)
                 setInterval(()=>{
                     this.enterpriseAutonomyList.scoreList = normalData