diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue index 41153e1f9d..c75e30a12b 100644 --- a/frontend/src/views/chart/components/table/TableNormal.vue +++ b/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 } } }