Merge pull request #108 from dataease/pr@dev_v1.0@refactor_优化表格组件渲染

refactor: 视图表格组件，渲染速度优化

frontend/src/views/chart/components/table/TableNormal.vue

@@ -88,14 +88,12 @@ export default {
     }
   },
   watch: {
-    chart() {
+    chart: function() {
       this.init()
-      this.calcHeight()
     }
   },
   mounted() {
     this.init()
-    this.calcHeight()
     // 监听元素变动事件
     eventBus.$on('resizing', (componentId) => {
       this.chartResize()
@@ -103,6 +101,13 @@ export default {
   },
   methods: {
     init() {
+      this.resetHeight()
+      this.$nextTick(() => {
+        this.initData()
+        this.calcHeightDelay()
+      })
+    },
+    initData() {
       const that = this
       let datas = []
       if (this.chart.data) {
@@ -117,30 +122,33 @@ export default {
         this.initStyle()
       })
       window.onresize = function() {
-        that.calcHeight()
+        that.calcHeightDelay()
       }
     },
-    calcHeight() {
+    calcHeightRightNow() {
       this.$nextTick(() => {
-        setTimeout(() => {
-          if (this.$refs.tableContainer) {
-            const currentHeight = this.$refs.tableContainer.offsetHeight
-            const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight
-            let tableHeight
-            if (this.chart.data) {
-              tableHeight = (this.chart.data.tableRow.length + 2) * 36
-            } else {
-              tableHeight = 0
-            }
-            if (tableHeight > tableMaxHeight) {
-              this.height = tableMaxHeight + 'px'
-            } else {
-              this.height = 'auto'
-            }
+        if (this.$refs.tableContainer) {
+          const currentHeight = this.$refs.tableContainer.offsetHeight
+          const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight
+          let tableHeight
+          if (this.chart.data) {
+            tableHeight = (this.chart.data.tableRow.length + 2) * 36
+          } else {
+            tableHeight = 0
           }
-        }, 100)
+          if (tableHeight > tableMaxHeight) {
+            this.height = tableMaxHeight + 'px'
+          } else {
+            this.height = 'auto'
+          }
+        }
       })
     },
+    calcHeightDelay() {
+      setTimeout(() => {
+        this.calcHeightRightNow()
+      }, 100)
+    },
     initStyle() {
       if (this.chart.customAttr) {
         const customAttr = JSON.parse(this.chart.customAttr)
@@ -243,6 +251,10 @@ export default {
 
     initClass() {
       return this.chart.id
+    },
+
+    resetHeight() {
+      this.height = 100
     }
   }
 }