diff --git a/packages/table/src/table-layout.js b/packages/table/src/table-layout.js index a35faebe2..48664630f 100644 --- a/packages/table/src/table-layout.js +++ b/packages/table/src/table-layout.js @@ -16,6 +16,7 @@ class TableLayout { this.rightFixedWidth = null; this.tableHeight = null; this.headerHeight = 44; // Table Header Height + this.footerHeight = 44; // Table Footer Height this.viewportHeight = null; // Table Height - Scroll Bar Height this.bodyHeight = null; // Table Height - Table Header Height this.fixedBodyHeight = null; // Table Height - Table Header Height - Scroll Bar Height @@ -73,18 +74,18 @@ class TableLayout { updateHeight() { const height = this.tableHeight = this.table.$el.clientHeight; const noData = !this.table.data || this.table.data.length === 0; - const { headerWrapper } = this.table.$refs; + const { headerWrapper, footerWrapper } = this.table.$refs; + const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0; if (this.showHeader && !headerWrapper) return; if (!this.showHeader) { this.headerHeight = 0; if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) { - this.bodyHeight = height; + this.bodyHeight = height - footerHeight + (footerWrapper ? 1 : 0); } this.fixedBodyHeight = this.scrollX ? height - this.gutterWidth : height; } else { const headerHeight = this.headerHeight = headerWrapper.offsetHeight; - const ratio = this.table.showSummary && this.table.data && this.table.data.length > 0 ? 2 : 1; - const bodyHeight = height - ratio * headerHeight + (this.table.showSummary ? 1 : 0); + const bodyHeight = height - headerHeight - footerHeight + (footerWrapper ? 1 : 0); if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) { this.bodyHeight = bodyHeight; } diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index 2eb35d8bb..d96d50c44 100644 --- a/packages/table/src/table.vue +++ b/packages/table/src/table.vue @@ -337,7 +337,9 @@ }; } else if (this.maxHeight) { style = { - 'max-height': (this.showHeader ? this.maxHeight - this.layout.headerHeight : this.maxHeight) + 'px' + 'max-height': (this.showHeader + ? this.maxHeight - this.layout.headerHeight - this.layout.footerHeight + : this.maxHeight - this.layout.footerHeight) + 'px' }; }