github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: fix table body height calculations

pull/3382/merge
Leopoldthecoder 2017-05-08 11:35:13 +08:00 committed by 杨奕
parent 595271f463
commit d338372979
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/table/src/table-layout.js
View File

@ -16,6 +16,7 @@ class TableLayout {
this.rightFixedWidth = null; this.rightFixedWidth = null;
this.tableHeight = null; this.tableHeight = null;
this.headerHeight = 44; // Table Header Height this.headerHeight = 44; // Table Header Height
this.footerHeight = 44; // Table Footer Height
this.viewportHeight = null; // Table Height - Scroll Bar Height this.viewportHeight = null; // Table Height - Scroll Bar Height
this.bodyHeight = null; // Table Height - Table Header Height this.bodyHeight = null; // Table Height - Table Header Height
this.fixedBodyHeight = null; // Table Height - Table Header Height - Scroll Bar Height this.fixedBodyHeight = null; // Table Height - Table Header Height - Scroll Bar Height
@ -73,18 +74,18 @@ class TableLayout {
updateHeight() { updateHeight() {
const height = this.tableHeight = this.table.$el.clientHeight; const height = this.tableHeight = this.table.$el.clientHeight;
const noData = !this.table.data || this.table.data.length === 0; 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 && !headerWrapper) return;
if (!this.showHeader) { if (!this.showHeader) {
this.headerHeight = 0; this.headerHeight = 0;
if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) { 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; this.fixedBodyHeight = this.scrollX ? height - this.gutterWidth : height;
} else { } else {
const headerHeight = this.headerHeight = headerWrapper.offsetHeight; const headerHeight = this.headerHeight = headerWrapper.offsetHeight;
const ratio = this.table.showSummary && this.table.data && this.table.data.length > 0 ? 2 : 1; const bodyHeight = height - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
const bodyHeight = height - ratio * headerHeight + (this.table.showSummary ? 1 : 0);
if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) { if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
this.bodyHeight = bodyHeight; this.bodyHeight = bodyHeight;
} }

4
packages/table/src/table.vue
View File

@ -337,7 +337,9 @@
}; };
} else if (this.maxHeight) { } else if (this.maxHeight) {
style = { 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'
}; };
} }