调整table滚动兼顾使用滚动条

src/utils/inject.js

@@ -12,8 +12,11 @@ const libs = [
   `${KENGEE_CDN_BASE}/js/d3-array.min.js`,
   `${KENGEE_CDN_BASE}/js/d3-geo.min.js`,
   '/presource/datascreen/js/ezuikit-flv/ezuikit.js',
-  // '/presource/datascreen/js/ezuikit.js',
   '/presource/datascreen/js/clappr.min.js',
+  '/presource/datascreen/js/simplebar/simplebar.min.js',
+]
+const css = [
+  "/presource/datascreen/js/simplebar/simplebar.css"
 ]
 window.$loadScript = (type = 'js', url, dom = "body") => {
   let flag = false;
@@ -131,6 +134,63 @@ Vue.component("HlsPlayer", {
     this.player?.destroy()
   }
 })
+Vue.component("scrollTable", {
+  props: {
+    tableData: {default: () => []},
+    columns: {default: () => []},
+    config: {default: () => ({})}
+  },
+  data() {
+    return {
+      timer: null,
+      scroll: null
+    }
+  },
+  render(h) {
+    const {config, tableData, columns} = this.$props
+    return h('el-table', {
+        props: {
+          headerCellClassName: 'tableHeader', cellClassName: 'tableCell', stripe: !0,
+          ...config, data: tableData, height: '100%'
+        }, class: 'scrollTable'
+      },
+      columns.map(col => h("tableColumn", {props: {column: col}}))
+    )
+  },
+  methods: {
+    initScroll() {
+      const {SimpleBar} = window
+      const dom = this.$el.querySelector('.el-table__body-wrapper')
+      this.scroll = new SimpleBar(dom)
+      dom.addEventListener('mouseover', this.stopAutoScroll)
+      dom.addEventListener('mouseout', this.autoScroll)
+      // this.scroll.refresh();
+    },
+    autoScroll() {
+      if (this.timer) clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        const dom = this.$el.querySelector('.simplebar-content-wrapper')
+        const max = dom.scrollHeight - dom.clientHeight
+        if (dom.scrollTop + 30 >= max) dom.scrollTop = 0
+        else dom.scrollTop += 30
+      }, 1000)
+    },
+    stopAutoScroll() {
+      if (this.timer) clearInterval(this.timer)
+    }
+  },
+  mounted() {
+    this.initScroll()
+    this.autoScroll()
+  },
+  beforeDestroy() {
+    this.stopAutoScroll()
+    this.scroll?.destroy()
+    const dom = this.$el.querySelector('.el-table__body-wrapper')
+    dom.removeEventListener("mouseover", this.stopAutoScroll)
+    dom.removeEventListener("mouseout", this.autoScroll)
+  }
+})
 Vue.component("tableColumn", {
   props: {
     column: {default: () => ({})}
@@ -153,4 +213,5 @@ Vue.component("tableColumn", {
 export default Promise.all([
   import("./fetch"),
   ...libs.map(url => $loadScript('js', url)),
+  ...css.map(url => $loadScript('css', url))
 ])