Table: fix sync height

ElemeFE · Nov 17, 2021 · 1a3fdb2 · 1a3fdb2
1 parent 363282b
commit 1a3fdb2
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git 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
@@ -41,7 +41,9 @@ export default {
         border="0">
         <colgroup>
           {
-            this.columns.map(column => <col name={column.id} key={column.id} />)
+            this.columns
+              .filter((column, index) => !(this.columnsHidden[index] && this.fixed))
+              .map(column => <col name={column.id} key={column.id} />)
           }
         </colgroup>
         <tbody>
@@ -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}
         >
         </TableRow>
       );

diff --git 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
@@ -17,7 +17,8 @@ export default {
     'getCellStyle',
     'getCellClass',
     'handleCellMouseLeave',
-    'handleCellMouseEnter'
+    'handleCellMouseEnter',
+    'fixed'
   ],
   render() {
     const {
@@ -38,6 +39,9 @@ export default {
       <tr>
         {
           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;