perf(data-table): scroll perf

src/DataTable/src/BaseTable.vue

@@ -7,7 +7,6 @@
       :data="data"
       :fixed="fixed"
       :scroll-x="scrollX"
-      @scroll="handleHeaderScroll"
       @set-active-fixed-column="setActiveFixedColumn"
     />
     <table-body
@@ -22,7 +21,6 @@
       :min-height="bodyMinHeight"
       :loading="loading"
       :fixed="fixed"
-      @scroll="handleBodyScroll"
     />
     <slot />
   </div>
@@ -37,6 +35,11 @@ export default {
     TableHeader,
     TableBody
   },
+  inject: {
+    NDataTable: {
+      default: null
+    }
+  },
   props: {
     main: {
       type: Boolean,
@@ -90,12 +93,6 @@ export default {
     getBodyElement () {
       return this.$refs.body.getScrollContainer()
     },
-    handleBodyScroll (...args) {
-      this.$emit('scroll', ...args)
-    },
-    handleHeaderScroll (...args) {
-      this.$emit('header-scroll', ...args)
-    },
     setActiveFixedColumn (leftActiveFixedColumn, rightActiveFixedColumn) {
       this.$refs.body.activeLeft = leftActiveFixedColumn
       this.$refs.body.activeRight = rightActiveFixedColumn

src/DataTable/src/DataTable.vue

@@ -22,8 +22,6 @@
           :row-class-name="rowClassName"
           :loading="loading"
           :body-min-height="42"
-          @header-scroll="handleMainTableHeaderScroll"
-          @scroll="handleTableBodyScroll"
         >
           <slot name="append" />
         </base-table>
@@ -515,7 +513,7 @@ export default {
         body
       }
     },
-    handleMainTableHeaderScroll (e, active) {
+    handleTableHeaderScroll (e, active) {
       if (this.scrollingPart === null) {
         this.scrollingPart = 'header'
       }

src/DataTable/src/TableParts/Body.vue

@@ -125,7 +125,6 @@ export default {
       type: Boolean,
       default: false
     }
-
   },
   data () {
     return {
@@ -169,7 +168,7 @@ export default {
     },
     createCustomWidthStyle: createCustomWidthStyle,
     handleScroll (event) {
-      this.$emit('scroll', event)
+      this.NDataTable.handleTableBodyScroll(event)
     }
   }
 }

src/DataTable/src/TableParts/Header.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    ref="table"
     :class="{
       [`n-${theme}-theme`]: theme
     }"
@@ -90,6 +89,7 @@ import SortButton from '../HeaderButton/SortButton'
 import FilterButton from '../HeaderButton/FilterButton'
 import { createCustomWidthStyle } from '../utils'
 import render from '../../../_utils/vue/render'
+import resizeObserverDelegate from '../../../_utils/delegate/resizeObserverDelegate'
 
 function isColumnSortable (column) {
   return !!column.sorter
@@ -213,19 +213,27 @@ export default {
     }
   },
   mounted () {
-    this.setActiveRight(this.$refs.body)
-    this.setActiveLeft(this.$refs.body)
+    resizeObserverDelegate.registerHandler(this.$el, this.handleResize)
+    this.handleResize()
+    this.setActiveLeft(this.$el)
+    this.setActiveRight(this.$el)
     this.$emit('set-active-fixed-column', this.leftActiveFixedColumn, this.rightActiveFixedColumn)
   },
+  beforeDestroy () {
+    resizeObserverDelegate.unregisterHandler(this.$el)
+  },
   methods: {
     isColumnSortable,
     isColumnFilterable,
     createCustomWidthStyle,
+    handleResize () {
+      this.tableWidth = this.$el.offsetWidth
+    },
     handleScroll (e) {
       this.setActiveRight(e.target)
       this.setActiveLeft(e.target)
       this.$emit('set-active-fixed-column', this.leftActiveFixedColumn, this.rightActiveFixedColumn)
-      this.$emit('scroll', e)
+      this.NDataTable.handleTableHeaderScroll(e)
     },
     handleCheckboxInput (column) {
       if (this.checkboxIndererminate || this.checkboxChecked) {
@@ -247,12 +255,14 @@ export default {
     setActiveRight (target) {
       const rightFixedColumns = this.NDataTable.rightFixedColumns
       const scrollLeft = target.scrollLeft
-      const tableWidth = this.$refs.table.offsetWidth
+      const tableWidth = this.tableWidth
       const scrollWidth = target.scrollWidth
+      const fixedColumnsRight = this.fixedColumnsRight
+      const rightActiveFixedColumn = {}
+      this.rightActiveFixedColumn = rightActiveFixedColumn
       for (let i = 0; i < rightFixedColumns.length; i++) {
-        this.rightActiveFixedColumn = {}
-        if (scrollLeft + this.fixedColumnsRight[rightFixedColumns[i].key] + tableWidth < scrollWidth) {
-          this.rightActiveFixedColumn[rightFixedColumns[i].key] = true
+        if (scrollLeft + fixedColumnsRight[rightFixedColumns[i].key] + tableWidth < scrollWidth) {
+          rightActiveFixedColumn[rightFixedColumns[i].key] = true
           break
         }
       }
@@ -261,14 +271,12 @@ export default {
       const leftFixedColumns = this.NDataTable.leftFixedColumns
       const scrollLeft = target.scrollLeft
       let leftWidth = 0
+      const fixedColumnsLeft = this.fixedColumnsLeft
+      this.leftActiveFixedColumn = {}
       for (let i = 0; i < leftFixedColumns.length; i++) {
-        if (scrollLeft > this.fixedColumnsLeft[leftFixedColumns[i].key] - leftWidth) {
-          this.leftActiveFixedColumn = {}
-          this.leftActiveFixedColumn[leftFixedColumns[i].key] = true
-          leftWidth = leftWidth + leftFixedColumns[i].width
-          continue
-        } else if (i === 0) {
-          this.leftActiveFixedColumn = {}
+        if (scrollLeft > fixedColumnsLeft[leftFixedColumns[i].key] - leftWidth) {
+          this.leftActiveFixedColumn = { [leftFixedColumns[i].key]: true }
+          leftWidth += leftFixedColumns[i].width
         } else {
           break
         }