更新2.15.12的table源码

package.json

 {
   "name": "element-ui",
-  "version": "2.15.7692",
+  "version": "2.15.7693",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

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)) {
@@ -62,14 +61,13 @@ class TableLayout {
     this.height = value;
 
     if (!el && (value || value === 0)) return Vue.nextTick(() => this.setHeight(value, prop));
-    if (el && el.style) {
-      if (typeof value === 'number') {
-        el.style[prop] = value + 'px';
-        this.updateElsHeight();
-      } else if (typeof value === 'string') {
-        el.style[prop] = value;
-        this.updateElsHeight();
-      }
+
+    if (typeof value === 'number') {
+      el.style[prop] = value + 'px';
+      this.updateElsHeight();
+    } else if (typeof value === 'string') {
+      el.style[prop] = value;
+      this.updateElsHeight();
     }
   }
 
@@ -115,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.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
@@ -412,7 +412,7 @@
       },
 
       // TODO 使用 CSS transform
-      syncPostion: throttle(20, function() {
+      syncPostion() {
         const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = this.bodyWrapper;
         const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper } = this.$refs;
         if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
@@ -427,17 +427,30 @@
         } else {
           this.scrollPosition = 'middle';
         }
+      },
+
+      throttleSyncPostion: throttle(16, function() {
+        this.syncPostion();
       }),
 
+      onScroll(evt) {
+        let raf = window.requestAnimationFrame;
+        if (!raf) {
+          this.throttleSyncPostion();
+        } else {
+          raf(this.syncPostion);
+        }
+      },
+
       bindEvents() {
-        this.bodyWrapper.addEventListener('scroll', this.syncPostion, { passive: true });
+        this.bodyWrapper.addEventListener('scroll', this.onScroll, { passive: true });
         if (this.fit) {
           addResizeListener(this.$el, this.resizeListener);
         }
       },
 
       unbindEvents() {
-        this.bodyWrapper.removeEventListener('scroll', this.syncPostion, { passive: true });
+        this.bodyWrapper.removeEventListener('scroll', this.onScroll, { passive: true });
         if (this.fit) {
           removeResizeListener(this.$el, this.resizeListener);
         }