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;