Browse Source

keep mx-table scroll position in deactivate&activate

hare8999@163.com 2 years ago
parent
commit
196fa7672c

+ 20 - 1
src/components/MxTable/index.vue

@@ -74,6 +74,10 @@ export default {
     }
   },
   props: {
+    keepScroll: {
+      type: Boolean,
+      default: false
+    },
     border: {
       type: Boolean,
       default: false
@@ -97,7 +101,22 @@ export default {
   },
   data() {
     return {
-      properties: {}
+      cacheScrollLeft: 0,
+      cacheScrollTop: 0
+    }
+  },
+  activated() {
+    if (this.keepScroll && (this.cacheScrollLeft || this.cacheScrollTop)) {
+      this.$nextTick(()=>{
+        this.$refs.table.bodyWrapper.scrollLeft = this.cacheScrollLeft
+        this.$refs.table.bodyWrapper.scrollTop = this.cacheScrollTop
+      })
+    }
+  },
+  deactivated() {
+    if (this.keepScroll) {
+      this.cacheScrollLeft = this.$refs.table.bodyWrapper.scrollLeft
+      this.cacheScrollTop = this.$refs.table.bodyWrapper.scrollTop
     }
   },
   methods: {

+ 1 - 1
src/views/elective/generation/components/elective-generation-table.vue

@@ -1,5 +1,5 @@
 <template>
-  <mx-table ref="table" :prop-defines="resolvedTable.columns" :rows="resolvedTable.rows" border>
+  <mx-table ref="table" :prop-defines="resolvedTable.columns" :rows="resolvedTable.rows" border keep-scroll>
     <template #elective-cell="{value, label, prop, key}">
       <el-tooltip :disabled="!isCellQueryable(value, prop)" effect="light">
         <div slot="content">