Merge pull request #580 from furybean/improve-table-fixed

[Table] Improve fixed implement method.

packages/table/src/table-body.js

@@ -52,10 +52,10 @@ export default {
                 on-mouseenter={ _ => this.handleMouseEnter($index) }
                 class={ this.getRowClass(row, $index) }>
                 {
-                  this._l(this.columns, (column) =>
+                  this._l(this.columns, (column, cellIndex) =>
                     <td
                       style={ this.getColumnWhiteSpaceStyle(column) }
-                      class={ [column.id, column.align] }
+                      class={ [column.id, column.align, this.isCellHidden(cellIndex) ? 'hidden' : '' ] }
                       on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                       on-mouseleave={ this.handleCellMouseLeave }>
                       {
@@ -81,18 +81,24 @@ export default {
     data() {
       return this.store.states.data;
     },
+
     hoverRowIndex() {
       return this.store.states.hoverRow;
     },
-    currentRow() {
-      return this.store.states.currentRow;
+
+    columnsCount() {
+      return this.store.states.columns.length;
+    },
+
+    leftFixedCount() {
+      return this.store.states.fixedColumns.length;
+    },
+
+    rightFixedCount() {
+      return this.store.states.rightFixedColumns.length;
     },
+
     columns() {
-      if (this.fixed === true || this.fixed === 'left') {
-        return this.store.states.fixedColumns;
-      } else if (this.fixed === 'right') {
-        return this.store.states.rightFixedColumns;
-      }
       return this.store.states.columns;
     }
   },
@@ -104,11 +110,18 @@ export default {
   },
 
   methods: {
+    isCellHidden(index) {
+      if (this.fixed === true || this.fixed === 'left') {
+        return index >= this.leftFixedCount;
+      } else if (this.fixed === 'right') {
+        return index < this.columnsCount - this.rightFixedCount;
+      } else {
+        return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount);
+      }
+    },
+
     getRowClass(row, index) {
       const classes = [];
-      if (row === this.currentRow) {
-        classes.push('current-row');
-      }
       if (this.hoverRowIndex === index) {
         classes.push('hover-row');
       }

packages/table/src/table-header.js

@@ -26,13 +26,13 @@ export default {
         <thead>
           <tr>
             {
-              this._l(this.columns, column =>
+              this._l(this.columns, (column, cellIndex) =>
                 <th
                   on-mousemove={ ($event) => this.handleMouseMove($event, column) }
                   on-mouseout={ this.handleMouseOut }
                   on-mousedown={ ($event) => this.handleMouseDown($event, column) }
                   on-click={ ($event) => this.handleHeaderClick($event, column) }
-                  class={ [column.id, column.direction, column.align] }>
+                  class={ [column.id, column.direction, column.align, this.isCellHidden(cellIndex) ? 'hidden' : ''] }>
                   {
                     [
                       column.headerTemplate
@@ -82,17 +82,34 @@ export default {
       return this.store.states.isAllSelected;
     },
 
+    columnsCount() {
+      return this.store.states.columns.length;
+    },
+
+    leftFixedCount() {
+      return this.store.states.fixedColumns.length;
+    },
+
+    rightFixedCount() {
+      return this.store.states.rightFixedColumns.length;
+    },
+
     columns() {
-      if (this.fixed === true || this.fixed === 'left') {
-        return this.store.states.fixedColumns;
-      } else if (this.fixed === 'right') {
-        return this.store.states.rightFixedColumns;
-      }
       return this.store.states.columns;
     }
   },
 
   methods: {
+    isCellHidden(index) {
+      if (this.fixed === true || this.fixed === 'left') {
+        return index >= this.leftFixedCount;
+      } else if (this.fixed === 'right') {
+        return index < this.columnsCount - this.rightFixedCount;
+      } else {
+        return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount);
+      }
+    },
+
     toggleAllSelection() {
       this.store.commit('toggleAllSelection');
     },

packages/table/src/table-layout.js

 import { getScrollBarWidth } from './util';
-import Vue from 'vue';
 
 let GUTTER_WIDTH;
 
@@ -40,30 +39,6 @@ class TableLayout {
     }
   }
 
-  syncHeight() {
-    Vue.nextTick(() => {
-      const { bodyWrapper, fixedBodyWrapper } = this.table.$refs;
-
-      // 若非固定列中的某行内容被撑高, 需要固定列中对应行高度与其保持一致
-      const bodyHeight = bodyWrapper.offsetHeight;
-      const fixedBodyHeight = fixedBodyWrapper.offsetHeight;
-
-      if (bodyHeight !== fixedBodyHeight) {
-        const rows = bodyWrapper.querySelectorAll('tr');
-        const fixedRows = fixedBodyWrapper.querySelectorAll('tr');
-
-        [].forEach.call(rows, (row, i) => {
-          const fixedRow = fixedRows[i];
-          const rowHeight = row.offsetHeight;
-          const fixedRowHeight = fixedRow.offsetHeight;
-          if (rowHeight !== fixedRowHeight) {
-            fixedRow.style.height = rowHeight + 'px';
-          }
-        });
-      }
-    });
-  }
-
   updateScrollY() {
     const bodyWrapper = this.table.$refs.bodyWrapper;
     if (this.table.$el && bodyWrapper) {

packages/table/src/table-store.js

@@ -34,7 +34,6 @@ const TableStore = function(table, initialState = {}) {
     selection: [],
     reserveSelection: false,
     selectable: null,
-    currentRow: null,
     hoverRow: null
   };
 
@@ -77,14 +76,12 @@ TableStore.prototype.mutations = {
       }
     }
 
-    if (states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0) Vue.nextTick(() => this.table.syncHeight());
     Vue.nextTick(() => this.table.updateScrollY());
   },
 
   changeSortCondition(states) {
     states.data = orderBy((states._data || []), states.sortCondition.property, states.sortCondition.direction);
 
-    if (states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0) Vue.nextTick(() => this.table.syncHeight());
     Vue.nextTick(() => this.table.updateScrollY());
   },
 

packages/table/src/table.vue

@@ -162,10 +162,6 @@
         this.layout.updateScrollY();
       },
 
-      syncHeight() {
-        this.layout.syncHeight();
-      },
-
       bindEvents() {
         const { bodyWrapper, headerWrapper } = this.$refs;
         const refs = this.$refs;

packages/theme-default/src/table.css

@@ -58,7 +58,7 @@
     }
 
     & th, td {
-      height: 20px;
+      height: 40px;
       min-width: 0;
       box-sizing: border-box;
       text-overflow: ellipsis;
@@ -110,6 +110,7 @@
       top: 0;
       left: 0;
       box-shadow: 1px 0 8px #d3d4d6;
+      overflow-x: hidden;
 
       &::before {
         content: '';
@@ -129,6 +130,11 @@
       right: 0;
 
       box-shadow: -1px 0 8px #d3d4d6;
+
+      .el-table__fixed-header-wrapper, .el-table__fixed-body-wrapper {
+        left: auto;
+        right: 0;
+      }
     }
 
     @e fixed-header-wrapper {
@@ -251,11 +257,18 @@
       width: 0;
     }
 
-    & td .cell {
+    & td.hidden, th.hidden {
+      > * {
+        visibility: hidden;
+      }
+    }
+
+    & .cell {
       box-sizing: border-box;
       overflow: hidden;
       text-overflow: ellipsis;
-      line-height: 40px;
+      white-space: normal;
+      line-height: 24px;
       padding-left: 18px;
       padding-right: 18px;
     }