表格吸顶

src/components/AiTable.vue

@@ -115,7 +115,8 @@ export default {
     return {
       name: '',
       chooseList: [],
-      defaultPage: {}
+      defaultPage: {},
+      heightTop: 0
     }
   },
   components: {
@@ -155,6 +156,15 @@ export default {
       }
     },
   },
+
+  mounted() { //添加监听滚动条事件
+    window.addEventListener('scroll', this.handleScroll, true)
+  },
+
+  destroyed() { //移除（跳转页面后移除）
+    window.removeEventListener('scroll', this.handleScroll, true)
+  },
+
   methods: {
     handleChange(current) {
       this.$emit('update:current', current)
@@ -163,6 +173,27 @@ export default {
         this.$emit('getList')
       })
     },
+
+    handleScroll() {
+      const top = document.querySelector('.top') ? document.querySelector('.top').clientHeight + 56 : 56 
+      let heightTop = document.getElementsByClassName('ai-list__content--right')[0].scrollTop //距离顶部高度
+
+      if (heightTop >= top) {
+        document.getElementsByClassName('el-table__header-wrapper')[0].style.position = `fixed`
+        document.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = '9999'
+        document.getElementsByClassName('el-table__header-wrapper')[0].style.top = `${112}px`
+        document.getElementsByClassName('el-table__fixed-right')[0].style.position = `fixed`
+        document.getElementsByClassName('el-table__fixed-right')[0].style.zIndex = '9999'
+        document.getElementsByClassName('el-table__fixed-right')[0].style.top = `${112}px`
+    } else {
+        document.getElementsByClassName('el-table__header-wrapper')[0].style.position = ''
+        document.getElementsByClassName('el-table__header-wrapper')[0].style.top = ''
+        document.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = ''
+        document.getElementsByClassName('el-table__fixed-right')[0].style.position = ''
+        document.getElementsByClassName('el-table__fixed-right')[0].style.top = ''
+        document.getElementsByClassName('el-table__fixed-right')[0].style.zIndex = ''
+      }
+    },
     handleSizeChange(size) {
       this.$emit('update:size', size)
       this.$emit('update:pageConfig', {...this.pageConfig, size})