Table: revert sync fixed table rows height (ElemeFE#21486)

Author: cs1707

packages/table/src/store/index.js

@@ -98,7 +98,6 @@ Watcher.prototype.mutations = {
     }
 
     this.updateTableScrollY();
-    this.syncFixedTableRowHeight();
   },
 
   filterChange(states, options) {
@@ -112,7 +111,6 @@ Watcher.prototype.mutations = {
     }
 
     this.updateTableScrollY();
-    this.syncFixedTableRowHeight();
   },
 
   toggleAllSelection() {
@@ -146,8 +144,4 @@ Watcher.prototype.updateTableScrollY = function() {
   Vue.nextTick(this.table.updateScrollY);
 };
 
-Watcher.prototype.syncFixedTableRowHeight = function() {
-  Vue.nextTick(() => this.table.layout.syncFixedTableRowHeight());
-};
-
 export default Watcher;

packages/table/src/table-body.js

@@ -41,22 +41,13 @@ export default {
         border="0">
         <colgroup>
           {
-            this.columns
-              .filter((column, index) => !(this.columnsHidden[index] && this.fixed))
-              .map(column => <col name={column.id} key={column.id} />)
+            this.columns.map(column => <col name={column.id} key={column.id} />)
           }
         </colgroup>
         <tbody>
           {
             data.reduce((acc, row) => {
-              const isSelected = this.store.isSelected(row);
-              const isExpanded = this.store.states.expandRows.indexOf(row) > -1;
-              return acc.concat(this.wrappedRowRender({
-                row,
-                $index: acc.length,
-                isSelected,
-                isExpanded
-              }));
+              return acc.concat(this.wrappedRowRender(row, acc.length));
             }, [])
           }
           <el-tooltip effect={this.table.tooltipEffect} placement="top" ref="tooltip" content={this.tooltipContent}></el-tooltip>
@@ -329,18 +320,8 @@ export default {
       table.$emit(`row-${name}`, row, column, event);
     },
 
-    getRowHeight(rowKey) {
-      const { fixed } = this;
-      if (!fixed) {
-        return null;
-      }
-      const height = (this.tableLayout.fixedColumnsBodyRowsHeight || {})[rowKey];
-      return typeof height === 'number' ? `${height}px` : height;
-    },
-
-    rowRender({ row, $index, treeRowData, isSelected, isExpanded }) {
+    rowRender(row, $index, treeRowData) {
       const { treeIndent, columns, firstDefaultColumnIndex } = this;
-
       const rowClasses = this.getRowClass(row, $index);
       let display = true;
       if (treeRowData) {
@@ -352,14 +333,9 @@ export default {
       let displayStyle = display ? null : {
         display: 'none'
       };
-      const height = this.getRowHeight($index);
-      const heightStyle = height ? {
-        height
-      } : null;
-
       return (
         <TableRow
-          style={[displayStyle, this.getRowStyle(row, $index), heightStyle]}
+          style={[displayStyle, this.getRowStyle(row, $index)]}
           class={rowClasses}
           key={this.getKeyOfRow(row, $index)}
           nativeOn-dblclick={($event) => this.handleDoubleClick($event, row)}
@@ -382,21 +358,21 @@ export default {
           getCellClass={this.getCellClass}
           handleCellMouseEnter={this.handleCellMouseEnter}
           handleCellMouseLeave={this.handleCellMouseLeave}
-          isSelected={isSelected}
-          isExpanded={isExpanded}
+          isSelected={this.store.isSelected(row)}
+          isExpanded={this.store.states.expandRows.indexOf(row) > -1}
           fixed={this.fixed}
         >
         </TableRow>
       );
     },
 
-    wrappedRowRender({ row, $index, isSelected, isExpanded }) {
+    wrappedRowRender(row, $index) {
       const store = this.store;
       const { isRowExpanded, assertRowKey } = store;
       const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
       if (this.hasExpandColumn && isRowExpanded(row)) {
         const renderExpanded = this.table.renderExpanded;
-        const tr = this.rowRender({ row, $index, isSelected, isExpanded });
+        const tr = this.rowRender(row, $index);
         if (!renderExpanded) {
           console.error('[Element Error]renderExpanded is required.');
           return tr;
@@ -429,7 +405,7 @@ export default {
             treeRowData.loading = cur.loading;
           }
         }
-        const tmp = [this.rowRender({ row, $index, treeRowData, isSelected, isExpanded })];
+        const tmp = [this.rowRender(row, $index, treeRowData)];
         // 渲染嵌套数据
         if (cur) {
           // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index
@@ -463,7 +439,7 @@ export default {
                 }
               }
               i++;
-              tmp.push(this.rowRender({ row: node, $index: $index + i, treeRowData: innerTreeRowData, isSelected, isExpanded }));
+              tmp.push(this.rowRender(node, $index + i, innerTreeRowData));
               if (cur) {
                 const nodes = lazyTreeNodeMap[childKey] || node[childrenColumnName];
                 traverse(nodes, cur);
@@ -477,7 +453,7 @@ export default {
         }
         return tmp;
       } else {
-        return this.rowRender({ row, $index, isSelected, isExpanded });
+        return this.rowRender(row, $index);
       }
     }
   }

packages/table/src/table-layout.js

@@ -25,7 +25,6 @@ class TableLayout {
     this.bodyHeight = null; // Table Height - Table Header Height
     this.fixedBodyHeight = null; // Table Height - Table Header Height - Scroll Bar Height
     this.gutterWidth = scrollbarWidth();
-    this.fixedColumnsBodyRowsHeight = {};
 
     for (let name in options) {
       if (options.hasOwnProperty(name)) {
@@ -114,40 +113,10 @@ class TableLayout {
 
     const noData = !(this.store.states.data && this.store.states.data.length);
     this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight;
-    setTimeout(() => {
-      this.syncFixedTableRowHeight();
-    });
     this.updateScrollY();
     this.notifyObservers('scrollable');
   }
 
-  syncFixedTableRowHeight() {
-    const fixedColumns = this.store.states.fixedColumns;
-    const rightFixedColumns = this.store.states.rightFixedColumns;
-    if (fixedColumns.length + rightFixedColumns.length === 0) {
-      return;
-    }
-    const { bodyWrapper } = this.table.$refs;
-    const tableRect = bodyWrapper.getBoundingClientRect();
-
-    if (tableRect.height !== undefined && tableRect.height <= 0) {
-      return;
-    }
-    const bodyRows = bodyWrapper.querySelectorAll('.el-table__row') || [];
-
-    const fixedColumnsBodyRowsHeight = [].reduce.call(
-      bodyRows,
-      (acc, row, index) => {
-        const height =
-          row.getBoundingClientRect().height || 'auto';
-        acc[index] = height;
-        return acc;
-      },
-      {}
-    );
-    this.fixedColumnsBodyRowsHeight = fixedColumnsBodyRowsHeight;
-  };
-
   headerDisplayNone(elm) {
     if (!elm) return true;
     let headerChild = elm;

packages/table/src/table-row.js

@@ -39,9 +39,6 @@ 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;

packages/table/src/table.vue

@@ -115,7 +115,7 @@
           :row-class-name="rowClassName"
           :row-style="rowStyle"
           :style="{
-            width: layout.fixedWidth ? layout.fixedWidth + 'px' : ''
+            width: bodyWidth
           }">
         </table-body>
         <div
@@ -176,7 +176,7 @@
           :row-style="rowStyle"
           :highlight="highlightCurrentRow"
           :style="{
-            width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '',
+            width: bodyWidth
           }">
         </table-body>
          <div