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

src/assets/main.css

@@ -168,11 +168,23 @@ a, .green {
   width: 100% !important;
 }
 
+.scrollTable .el-table__body-wrapper {
+  overflow-x: hidden !important;
+}
+
 .scrollTable .tableCell {
   color: #fff;
   border-color: transparent !important;
 }
 
+.scrollTable .cell {
+  text-wrap: unset !important;
+  word-break: break-all;
+  font-size: 12px;
+  padding-left: 6px !important;
+  padding-right: 6px !important;
+}
+
 .scrollTable .el-table__cell {
   padding: 3px 0 !important;
 }

src/utils/inject.js

@@ -173,14 +173,17 @@ Vue.component("scrollTable", {
     },
     autoScroll() {
       if (this.timer) clearInterval(this.timer)
+      this.$el.querySelector('.simplebar-vertical').style.display = 'none'
+      // this.$el.querySelectorAll('.simplebar-scrollbar').map(e => e.display = 'none')
       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)
+        if (dom.scrollTop + 1 >= max) dom.scrollTop = 0
+        else dom.scrollTop += 1
+      }, 60)
     },
     stopAutoScroll() {
+      this.$el.querySelector('.simplebar-vertical').style.display = 'block'
       if (this.timer) clearInterval(this.timer)
     }
   },
@@ -201,15 +204,22 @@ Vue.component("tableColumn", {
   },
   render(h) {
     const config = this.$props.column
-    return h('el-table-column', {props: {...config, label: `${config.label}` || "-"}},
-      config.children?.map(col => h("tableColumn", {props: {column: col}})) || h('template', {
-        slotScope: {
-          default: ({row}) => {
-            config.custom ? h('div', {style: {color: row.preSaleNum > row.stockNum ? 'red' : '#fff'}}, '周边库存情况') :
-              h('span', row[config.prop] || '')
-          }
+    let column = h('el-table-column', {
+      props: {...config, label: `${config.label}` || "-"}, scopedSlots: {
+        default: ({row}) => {
+          return config.custom ? h('div', {
+              style: {color: row.preSaleNum > row.stockNum ? 'red' : '#fff'}, class: 'pointer'
+            }, '周边库存情况') :
+            h('span', row[config.prop] || '')
         }
-      }))
+      }
+    })
+    if (config.children?.length > 0) {
+      column = h('el-table-column', {props: {...config, label: `${config.label}` || "-"}},
+        config.children.map(col => h("tableColumn", {props: {column: col}}))
+      )
+    }
+    return column
   },
 })