diff --git a/packages/table/src/store/index.js b/packages/table/src/store/index.js index 0bf49360080..e05ebe07ada 100644 --- a/packages/table/src/store/index.js +++ b/packages/table/src/store/index.js @@ -98,6 +98,7 @@ Watcher.prototype.mutations = { } this.updateTableScrollY(); + this.syncFixedTableRowHeight(); }, filterChange(states, options) { @@ -111,6 +112,7 @@ Watcher.prototype.mutations = { } this.updateTableScrollY(); + this.syncFixedTableRowHeight(); }, toggleAllSelection() { @@ -144,4 +146,8 @@ Watcher.prototype.updateTableScrollY = function() { Vue.nextTick(this.table.updateScrollY); }; +Watcher.prototype.syncFixedTableRowHeight = function() { + Vue.nextTick(() => this.table.layout.syncFixedTableRowHeight()); +}; + export default Watcher; diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index 226f4774dba..9ba0a24b6b7 100644 --- a/packages/table/src/table-body.js +++ b/packages/table/src/table-body.js @@ -41,7 +41,9 @@ export default { border="0"> { - this.columns.map(column => ) + this.columns + .filter((column, index) => !(this.columnsHidden[index] && this.fixed)) + .map(column => ) } @@ -70,15 +72,7 @@ export default { ...mapStates({ data: 'data', - columns(states) { - if (this.fixed === true || this.fixed === 'left') { - return states.fixedColumns; - } - if (this.fixed === 'right') { - return states.rightFixedColumns; - } - return states.columns; - }, + columns: 'columns', treeIndent: 'indent', leftFixedLeafCount: 'fixedLeafColumnsLength', rightFixedLeafCount: 'rightFixedLeafColumnsLength', @@ -140,8 +134,10 @@ export default { }, isColumnHidden(index) { - if (this.fixed === true || this.fixed === 'left' || this.fixed === 'right') { - return false; + if (this.fixed === true || this.fixed === 'left') { + return index >= this.leftFixedLeafCount; + } else if (this.fixed === 'right') { + return index < this.columnsCount - this.rightFixedLeafCount; } else { return (index < this.leftFixedLeafCount) || (index >= this.columnsCount - this.rightFixedLeafCount); } @@ -388,6 +384,7 @@ export default { handleCellMouseLeave={this.handleCellMouseLeave} isSelected={isSelected} isExpanded={isExpanded} + fixed={this.fixed} > ); diff --git a/packages/table/src/table-layout.js b/packages/table/src/table-layout.js index 0691b07eca0..4cbb88bfb8f 100644 --- a/packages/table/src/table-layout.js +++ b/packages/table/src/table-layout.js @@ -114,7 +114,9 @@ class TableLayout { const noData = !(this.store.states.data && this.store.states.data.length); this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight; - this.syncFixedTableRowHeight(); + setTimeout(() => { + this.syncFixedTableRowHeight(); + }); this.updateScrollY(); this.notifyObservers('scrollable'); } diff --git a/packages/table/src/table-row.js b/packages/table/src/table-row.js index fefbfca8f05..c695bb59bd8 100644 --- a/packages/table/src/table-row.js +++ b/packages/table/src/table-row.js @@ -17,7 +17,8 @@ export default { 'getCellStyle', 'getCellClass', 'handleCellMouseLeave', - 'handleCellMouseEnter' + 'handleCellMouseEnter', + 'fixed' ], render() { const { @@ -38,6 +39,9 @@ export default { { columns.map((column, cellIndex) => { + if (columnsHidden[cellIndex] && this.fixed) { + return null; + } const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex); if (!rowspan || !colspan) { return null;