Improve Table:

1. Add TableStore & TableLayout.
2. Remove customCriteria & customBackgroundColors.
3. Remove fixedColumnCount.
4. Add fixed prop for TableColumn.
5. Add selectable prop for TableColumn[type="selection"].

CHANGELOG.md

@@ -15,10 +15,15 @@
 - 修复 Loading 关闭后有几率滚动失效的问题
 - 修复 远程搜索的 Select 不能正确渲染默认初始值的问题
 - 修复 Switch 的 width 属性无效的问题
+- 优化 Table 性能，优化 Table 代码结构
+- Table 增加属性 rowClassName
+- TableColumn 增加 fixed 属性，可选值：true, false, left, right
+- TableColumn[type="selection"] 增加 selectable 属性
 
 #### 非兼容性更新
 
 - 全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 `lock` 修饰符
+- Table 删除属性 fixedColumnCount, customCriteria, customBackgroundColors
 
 ### 1.0.0-rc.7
 

packages/table/package.json

@@ -11,7 +11,7 @@
   "repository": "https://github.com/element-component/element/tree/master/packages/dialog",
   "author": "elemefe",
   "license": "MIT",
-  "devDependencies": {
+  "dependencies": {
     "throttle-debounce": "^1.0.1"
   }
 }

packages/table/src/table-body.js

-const getColumnById = function(grid, columnId) {
+import { getValueByPath, getCell } from './util';
+
+const getColumnById = function(table, columnId) {
   let column = null;
-  grid.columns.forEach(function(item) {
+  table.columns.forEach(function(item) {
     if (item.id === columnId) {
       column = item;
     }
@@ -8,26 +10,24 @@ const getColumnById = function(grid, columnId) {
   return column;
 };
 
-const getColumnByCell = function(grid, cell) {
-  const matches = (cell.className || '').match(/grid_[^\s]+/gm);
+const getColumnByCell = function(table, cell) {
+  const matches = (cell.className || '').match(/table_[^\s]+/gm);
   if (matches) {
-    return getColumnById(grid, matches[0]);
+    return getColumnById(table, matches[0]);
   }
   return null;
 };
 
-import { getValueByPath, getCell, orderBy, getChild } from './util';
-
 export default {
   props: {
-    columns: {},
-    data: {},
-    fixed: {},
-    selection: {
-      default() {
-        return [];
-      }
-    }
+    store: {
+      required: true
+    },
+    layout: {
+      required: true
+    },
+    rowClassName: [String, Function],
+    fixed: String
   },
 
   render(h) {
@@ -37,17 +37,20 @@ export default {
         cellspacing="0"
         cellpadding="0"
         border="0">
+        {
+          this._l(this.columns, column =>
+            <colgroup
+              name={ column.id }
+              width={ column.realWidth || column.width }
+            />)
+        }
         <tbody>
           {
             this._l(this.data, (row, $index) =>
               <tr
                 on-click={ ($event) => this.handleClick($event, row) }
                 on-mouseenter={ _ => this.handleMouseEnter($index) }
-                style={ this.getCustomStyle(row) }
-                class={{
-                  'current-row': row === this.$parent.selected,
-                  'hover': this.$parent.$parent.hoverRowIndex === $index
-                }}>
+                class={ this.getRowClass(row, $index) }>
                 {
                   this._l(this.columns, (column) =>
                     <td
@@ -57,11 +60,14 @@ export default {
                       on-mouseleave={ this.handleCellMouseLeave }>
                       {
                         column.template
-                          ? column.template.call(this._renderProxy, h, { row, column, $index, _self: this.$parent.$vnode.context })
-                          : <div class="cell">{ this.$getPropertyText(row, column.property, column.id) }</div>
+                          ? column.template.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.$parent.$vnode.context })
+                          : <div class="cell">{ this.getCellContent(row, column.property, column.id) }</div>
                       }
                     </td>
-                  ).concat(this.fixed ? <td class="gutter" /> : '')
+                  )
+                }
+                {
+                  !this.fixed && this.layout.scrollY && this.layout.gutterWidth ? <td class="gutter" /> : ''
                 }
               </tr>
             )
@@ -71,93 +77,104 @@ export default {
     );
   },
 
+  computed: {
+    data() {
+      return this.store.states.data;
+    },
+    hoverRowIndex() {
+      return this.store.states.hoverRow;
+    },
+    currentRow() {
+      return this.store.states.currentRow;
+    },
+    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;
+    }
+  },
+
   data() {
     return {
-      criteria: this.$parent.customCriteria,
-      colors: this.$parent.customBackgroundColors,
       tooltipDisabled: true
     };
   },
 
-  filters: {
-    orderBy
-  },
-
   methods: {
-    getColumnWhiteSpaceStyle(column) {
-      return column.showTooltipWhenOverflow ? { 'white-space': 'nowrap' } : {};
-    },
+    getRowClass(row, index) {
+      const classes = [];
+      if (row === this.currentRow) {
+        classes.push('current-row');
+      }
+      if (this.hoverRowIndex === index) {
+        classes.push('hover-row');
+      }
 
-    checkProperty(row) {
-      if (this.criteria && this.criteria.length > 0) {
-        for (let i = 0, len = this.criteria.length; i < len; i++) {
-          if (row[this.criteria[i]] === true) {
-            return i;
-          }
-        }
+      const rowClassName = this.rowClassName;
+      if (typeof rowClassName === 'string') {
+        classes.push(rowClassName);
+      } else if (typeof rowClassName === 'function') {
+        classes.push(rowClassName.apply(null, [row, index]) || '');
       }
-      return -1;
+
+      return classes.join(' ');
     },
 
-    getCustomStyle(row) {
-      if (!this.criteria || !this.colors || this.criteria.length !== this.colors.length) {
-        return {};
-      }
-      let criterionIndex = this.checkProperty(row);
-      return criterionIndex > -1 ? { 'background-color': this.colors[criterionIndex] } : {};
+    getColumnWhiteSpaceStyle(column) {
+      return column.showTooltipWhenOverflow ? { 'white-space': 'nowrap' } : {};
     },
 
     handleCellMouseEnter(event, row) {
-      let grid = this.$parent;
+      const table = this.$parent;
       const cell = getCell(event);
 
       if (cell) {
-        const column = getColumnByCell(grid, cell);
-        const hoverState = grid.hoverState = { cell: cell, column: column, row: row };
-        grid.$emit('cellmouseenter', hoverState.row, hoverState.column, hoverState.cell, event);
+        const column = getColumnByCell(table, cell);
+        const hoverState = table.hoverState = { cell, column, row };
+        table.$emit('cellmouseenter', hoverState.row, hoverState.column, hoverState.cell, event);
       }
 
       // 判断是否text-overflow, 如果是就显示tooltip
-      const cellChild = getChild(event);
+      const cellChild = event.target.querySelector('.cell');
 
       this.tooltipDisabled = cellChild.scrollWidth <= cellChild.offsetWidth;
     },
 
     handleCellMouseLeave(event) {
-      let grid = this.$parent;
       const cell = getCell(event);
 
       if (cell) {
-        const oldHoverState = grid.hoverState;
-        grid.$emit('cellmouseleave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
+        const table = this.$parent;
+        const oldHoverState = table.hoverState;
+        table.$emit('cellmouseleave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
       }
     },
 
     handleMouseEnter(index) {
-      this.$parent.hoverRowIndex = index;
+      this.store.commit('setHoverRow', index);
     },
 
     handleClick(event, row) {
-      let grid = this.$parent;
+      const table = this.$parent;
       const cell = getCell(event);
 
       if (cell) {
-        const column = getColumnByCell(grid, cell);
+        const column = getColumnByCell(table, cell);
         if (column) {
-          grid.$emit('cellclick', row, column, cell, event);
+          table.$emit('cellclick', row, column, cell, event);
         }
       }
 
-      if (grid.selectionMode === 'single') {
-        grid.selected = row;
-      }
+      this.store.commit('setSelectedRow', row);
 
-      grid.$emit('rowclick', row, event);
+      table.$emit('rowclick', row, event);
     },
 
-    $getPropertyText(row, property, columnId) {
-      let grid = this.$parent;
-      const column = getColumnById(grid, columnId);
+    getCellContent(row, property, columnId) {
+      const column = getColumnById(this.$parent, columnId);
       if (column && column.formatter) {
         return column.formatter(row, column);
       }

packages/table/src/table-column.js

@@ -28,20 +28,39 @@ const defaults = {
 
 const forced = {
   selection: {
-    headerTemplate: function(h) { return <div><el-checkbox nativeOn-click={ this.toggleAllSelection } domProps-value={ this.allSelected } on-input={ ($event) => this.$emit('allselectedchange', $event) } /></div>; },
-    template: function(h, { row }) { return <el-checkbox domProps-value={ row.$selected } on-input={ ($event) => {row.$selected = $event;} } />; },
+    headerTemplate: function(h) {
+      return <div><el-checkbox
+        nativeOn-click={ this.toggleAllSelection }
+        domProps-value={ this.isAllSelected }
+        on-input={ (value) => { this.$emit('allselectedchange', value); } } />
+      </div>;
+    },
+    template: function(h, { row, column, store, $index }) {
+      return <el-checkbox
+        domProps-value={ row.$selected }
+        disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
+        on-input={ (value) => { row.$selected = value; store.commit('rowSelectedChanged', row); } } />;
+    },
     sortable: false,
     resizable: false
   },
   index: {
     // headerTemplate: function(h) { return <div>#</div>; },
-    headerTemplate: function(h, label) { return <div>{ label || '#' }</div>; },
-    template: function(h, { row, $index }) { return <div>{ $index + 1 }</div>; },
+    headerTemplate: function(h, label) {
+      return <div>{ label || '#' }</div>;
+    },
+    template: function(h, { row, $index }) {
+      return <div>{ $index + 1 }</div>;
+    },
     sortable: false
   },
   filter: {
-    headerTemplate: function(h) { return <div>#</div>; },
-    template: function(h, { row, column }) { return <el-tag type="primary" style="height: 16px; line-height: 16px; min-width: 40px; text-align: center">{ row[column.property] }</el-tag>; },
+    headerTemplate: function(h) {
+      return <div>#</div>;
+    },
+    template: function(h, { row, column }) {
+      return <el-tag type="primary" style="height: 16px; line-height: 16px; min-width: 40px; text-align: center">{ row[column.property] }</el-tag>;
+    },
     resizable: false
   }
 };
@@ -60,6 +79,12 @@ const getDefaultColumn = function(type, options) {
     }
   }
 
+  if (!column.minWidth) {
+    column.minWidth = 80;
+  }
+
+  column.realWidth = column.width || column.minWidth;
+
   return column;
 };
 
@@ -73,6 +98,7 @@ export default {
     },
     label: String,
     property: String,
+    prop: String,
     width: {},
     minWidth: {},
     template: String,
@@ -89,7 +115,9 @@ export default {
       type: Boolean,
       default: false
     },
-    formatter: Function
+    fixed: [Boolean, String],
+    formatter: Function,
+    selectable: Function
   },
 
   render() {},
@@ -112,16 +140,25 @@ export default {
     ElTag
   },
 
+  computed: {
+    owner() {
+      let parent = this.$parent;
+      while (parent && !parent.tableId) {
+        parent = parent.$parent;
+      }
+      return parent;
+    }
+  },
+
   created() {
     this.customRender = this.$options.render;
     this.$options.render = (h) => h('div');
 
-    let columnId = this.columnId = (this.$parent.gridId || (this.$parent.columnId + '_')) + 'column_' + columnIdSeed++;
+    let columnId = this.columnId = (this.$parent.tableId || (this.$parent.columnId + '_')) + 'column_' + columnIdSeed++;
 
     let parent = this.$parent;
-    if (!parent.gridId) {
-      this.isChildColumn = true;
-    }
+    let owner = this.owner;
+    this.isChildColumn = owner !== parent;
 
     let type = this.type;
 
@@ -139,17 +176,15 @@ export default {
       if (isNaN(minWidth)) {
         minWidth = 80;
       }
-    } else {
-      minWidth = 80;
     }
 
     let isColumnGroup = false;
     let template;
 
-    let property = this.property;
+    let property = this.prop || this.property;
     if (property) {
       template = function(h, { row }, parent) {
-        return <span>{ parent.$getPropertyText(row, property, columnId) }</span>;
+        return <span>{ parent.getCellContent(row, property, columnId) }</span>;
       };
     }
 
@@ -163,11 +198,12 @@ export default {
       width,
       isColumnGroup,
       align: this.align ? 'is-' + this.align : null,
-      realWidth: width || minWidth,
       sortable: this.sortable,
       resizable: this.resizable,
       showTooltipWhenOverflow: this.showTooltipWhenOverflow,
-      formatter: this.formatter
+      formatter: this.formatter,
+      selectable: this.selectable,
+      fixed: this.fixed
     });
 
     objectAssign(column, forced[type] || {});
@@ -186,7 +222,7 @@ export default {
 
           return _self.customRender.call(data);
         };
-      };
+      }
 
       return _self.showTooltipWhenOverflow
         ? <el-tooltip
@@ -203,31 +239,8 @@ export default {
   },
 
   destroyed() {
-    if (!this.$parent) {
-      return;
-    }
-    let columns = this.$parent.columns;
-    if (columns) {
-      let columnId = this.columnId;
-      for (let i = 0, j = columns.length; i < j; i++) {
-        let column = columns[i];
-
-        if (column.id === columnId) {
-          columns.splice(i, 1);
-          break;
-        }
-      }
-    }
-
-    if (this.isChildColumn) {
-      if (this.$parent.$parent.$ready) {
-        this.$parent.$parent.debouncedReRender();
-      }
-    } else {
-      if (this.$parent.$ready) {
-        this.$parent.debouncedReRender();
-      }
-    }
+    if (!this.$parent) return;
+    this.owner.store.commit('removeColumn', this.columnConfig);
   },
 
   watch: {
@@ -237,6 +250,12 @@ export default {
       }
     },
 
+    prop(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.property = newVal;
+      }
+    },
+
     property(newVal) {
       if (this.columnConfig) {
         this.columnConfig.property = newVal;
@@ -245,8 +264,8 @@ export default {
   },
 
   mounted() {
-    let parent = this.$parent;
-    let columnConfig = this.columnConfig;
+    const owner = this.owner;
+    const parent = this.$parent;
     let columnIndex;
 
     if (!this.isChildColumn) {
@@ -255,18 +274,6 @@ export default {
       columnIndex = [].indexOf.call(parent.$el.children, this.$el);
     }
 
-    parent.columns.splice(columnIndex, 0, columnConfig);
-
-    if (this.isChildColumn) {
-      parent.columnConfig.columns = parent.columns;
-
-      if (parent.$parent.$ready) {
-        parent.$parent.debouncedReRender();
-      }
-    } else {
-      if (parent.$ready) {
-        parent.debouncedReRender();
-      }
-    }
+    owner.store.commit('insertColumn', this.columnConfig, columnIndex);
   }
 };

packages/table/src/table-header.js

@@ -16,47 +16,58 @@ export default {
             <colgroup
               name={ column.id }
               width={ column.realWidth || column.width }
-            />).concat(
-              <thead>
-                <tr>
+            />)
+        }
+        {
+          !this.fixed && this.layout.gutterWidth
+            ? <colgroup name="gutter" width={ this.layout.scrollY ? this.layout.gutterWidth : '' }></colgroup>
+            : ''
+        }
+        <thead>
+          <tr>
+            {
+              this._l(this.columns, column =>
+                <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] }>
                   {
-                    this._l(this.columns, column =>
-                      <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] }>
-                        {
-                          [
-                            column.headerTemplate
-                              ? column.headerTemplate.call(this._renderProxy, h, column.label)
-                              : <div>{ column.label }</div>,
-                            column.sortable
-                              ? <div class="caret-wrapper">
-                                  <i class="sort-caret ascending"></i>
-                                  <i class="sort-caret descending"></i>
-                                </div>
-                              : ''
-                          ]
-                        }
-                      </th>
-                    ).concat(this.$parent.showVScrollBar && this.$parent.currentGutterWidth ? <th class="gutter"
-                              style={{ width: this.$parent.currentGutterWidth + 'px' }}></th> : '')
+                    [
+                      column.headerTemplate
+                        ? column.headerTemplate.call(this._renderProxy, h, column.label)
+                        : <div>{ column.label }</div>,
+                      column.sortable
+                        ? <div class="caret-wrapper">
+                            <i class="sort-caret ascending"></i>
+                            <i class="sort-caret descending"></i>
+                          </div>
+                        : ''
+                    ]
                   }
-                </tr>
-              </thead>
-            )
-        }
+                </th>
+              )
+            }
+            {
+              !this.fixed && this.layout.gutterWidth
+                ? <th class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></th>
+                : ''
+            }
+          </tr>
+        </thead>
       </table>
     );
   },
 
   props: {
     columns: {},
-    fixed: Boolean,
-    allSelected: {
-      default: Boolean
+    fixed: String,
+    store: {
+      required: true
+    },
+    layout: {
+      required: true
     },
     border: Boolean
   },
@@ -66,9 +77,24 @@ export default {
     ElTag
   },
 
+  computed: {
+    isAllSelected() {
+      return this.store.states.isAllSelected;
+    },
+
+    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: {
-    toggleAllSelection($event) {
-      this.$parent.toggleAllSelection($event);
+    toggleAllSelection() {
+      this.store.commit('toggleAllSelection');
     },
 
     handleMouseDown(event, column) {
@@ -77,19 +103,19 @@ export default {
 
         this.$parent.resizeProxyVisible = true;
 
-        const gridEl = this.$parent.$el;
-        const gridLeft = gridEl.getBoundingClientRect().left;
+        const tableEl = this.$parent.$el;
+        const tableLeft = tableEl.getBoundingClientRect().left;
         const columnEl = this.$el.querySelector(`th.${column.id}`);
         const columnRect = columnEl.getBoundingClientRect();
-        const minLeft = columnRect.left - gridLeft + 30;
+        const minLeft = columnRect.left - tableLeft + 30;
 
         columnEl.classList.add('noclick');
 
         this.dragState = {
           startMouseLeft: event.clientX,
-          startLeft: columnRect.right - gridLeft,
-          startColumnLeft: columnRect.left - gridLeft,
-          gridLeft: gridLeft
+          startLeft: columnRect.right - tableLeft,
+          startColumnLeft: columnRect.left - tableLeft,
+          tableLeft
         };
 
         const resizeProxy = this.$parent.$refs.resizeProxy;
@@ -98,22 +124,20 @@ export default {
         document.onselectstart = function() { return false; };
         document.ondragstart = function() { return false; };
 
-        const mousemove = (event) => {
+        const handleMouseMove = (event) => {
           const deltaLeft = event.clientX - this.dragState.startMouseLeft;
           const proxyLeft = this.dragState.startLeft + deltaLeft;
 
           resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px';
         };
 
-        const mouseup = () => {
+        const handleMouseUp = () => {
           if (this.dragging) {
             const finalLeft = parseInt(resizeProxy.style.left, 10);
             const columnWidth = finalLeft - this.dragState.startColumnLeft;
             column.width = column.realWidth = columnWidth;
 
-            this.$nextTick(() => {
-              this.$parent.$calcColumns();
-            });
+            this.store.scheduleLayout();
 
             document.body.style.cursor = '';
             this.dragging = false;
@@ -123,8 +147,8 @@ export default {
             this.$parent.resizeProxyVisible = false;
           }
 
-          document.removeEventListener('mousemove', mousemove);
-          document.removeEventListener('mouseup', mouseup);
+          document.removeEventListener('mousemove', handleMouseMove);
+          document.removeEventListener('mouseup', handleMouseUp);
           document.onselectstart = null;
           document.ondragstart = null;
 
@@ -133,8 +157,8 @@ export default {
           }, 0);
         };
 
-        document.addEventListener('mousemove', mousemove);
-        document.addEventListener('mouseup', mouseup);
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
       }
     },
 
@@ -146,13 +170,14 @@ export default {
       if (!this.dragging && this.border) {
         let rect = target.getBoundingClientRect();
 
+        var bodyStyle = document.body.style;
         if (rect.width > 12 && rect.right - event.pageX < 8) {
-          document.body.style.cursor = 'col-resize';
+          bodyStyle.cursor = 'col-resize';
           this.draggingColumn = column;
         } else if (!this.dragging) {
-          document.body.style.cursor = '';
+          bodyStyle.cursor = '';
           this.draggingColumn = null;
-          if (column.sortable) document.body.style.cursor = 'pointer';
+          if (column.sortable) bodyStyle.cursor = 'pointer';
         }
       }
     },
@@ -176,14 +201,14 @@ export default {
 
       if (!column.sortable) return;
 
-      const grid = this.$parent;
+      const sortCondition = this.store.states.sortCondition;
 
-      if (grid.sortingColumn !== column) {
-        if (grid.sortingColumn) {
-          grid.sortingColumn.direction = '';
+      if (sortCondition.column !== column) {
+        if (sortCondition.column) {
+          sortCondition.column.direction = '';
         }
-        grid.sortingColumn = column;
-        grid.sortingProperty = column.property;
+        sortCondition.column = column;
+        sortCondition.property = column.property;
       }
 
       if (!column.direction) {
@@ -192,25 +217,12 @@ export default {
         column.direction = 'descending';
       } else {
         column.direction = '';
-        grid.sortingColumn = null;
-        grid.sortingProperty = null;
+        sortCondition.column = null;
+        sortCondition.property = null;
       }
+      sortCondition.direction = column.direction === 'descending' ? -1 : 1;
 
-      grid.sortingDirection = column.direction === 'descending' ? -1 : 1;
-    },
-
-    $setVisibleFilter(property) {
-      if (this.visibleFilter) {
-        this.visibleFilter = null;
-      } else {
-        this.visibleFilter = property;
-      }
-    }
-  },
-
-  watch: {
-    visibleFilter(val) {
-      this.$parent.visibleFilter = val;
+      this.store.commit('changeSortCondition');
     }
   },
 
@@ -218,9 +230,7 @@ export default {
     return {
       draggingColumn: null,
       dragging: false,
-      dragState: {},
-      columnsMap: null,
-      visibleFilter: null
+      dragState: {}
     };
   }
 };

packages/table/src/table-layout.js

+import { getScrollBarWidth } from './util';
+import Vue from 'vue';
+
+let GUTTER_WIDTH;
+
+class TableLayout {
+  constructor(options) {
+    this.table = null;
+    this.store = null;
+    this.columns = null;
+    this.fit = true;
+
+    this.scrollX = false;
+    this.scrollY = false;
+    this.bodyWidth = null;
+    this.fixedWidth = null;
+    this.rightFixedWidth = null;
+    this.tableHeight = null;
+    this.headerHeight = 44; // Table Header Height
+    this.viewportHeight = null; // Table Height - Scroll Bar Height
+    this.bodyHeight = null; // Table Height - Table Header Height
+    this.fixedBodyHeight = null; // Table Height - Table Header Height - Scroll Bar Height
+
+    if (GUTTER_WIDTH === undefined) {
+      GUTTER_WIDTH = getScrollBarWidth();
+    }
+    this.gutterWidth = GUTTER_WIDTH;
+
+    for (let name in options) {
+      if (options.hasOwnProperty(name)) {
+        this[name] = options[name];
+      }
+    }
+
+    if (!this.table) {
+      throw new Error('table is required for Table Layout');
+    }
+    if (!this.store) {
+      throw new Error('store is required for Table Layout');
+    }
+  }
+
+  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) {
+      const body = bodyWrapper.querySelector('.el-table__body');
+
+      this.scrollY = body.offsetHeight > bodyWrapper.offsetHeight;
+    }
+  }
+
+  setHeight(height) {
+    if (typeof height === 'string' && /^\d+$/.test(height)) {
+      height = Number(height);
+    }
+
+    const el = this.table.$el;
+    if (!isNaN(height) && el) {
+      el.style.height = height + 'px';
+
+      this.updateHeight();
+    }
+  }
+
+  updateHeight() {
+    const height = this.tableHeight = this.table.$el.clientHeight;
+    const { headerWrapper } = this.table.$refs;
+    if (!headerWrapper) return;
+    const headerHeight = this.headerHeight = headerWrapper.offsetHeight;
+    const bodyHeight = this.bodyHeight = height - headerHeight;
+    this.fixedBodyHeight = this.scrollX ? bodyHeight - this.gutterWidth : bodyHeight;
+    this.viewportHeight = this.scrollX ? height - this.gutterWidth : height;
+  }
+
+  update() {
+    const fit = this.fit;
+    const columns = this.table.columns;
+    const bodyWidth = this.table.$el.clientWidth;
+    let bodyMinWidth = 0;
+
+    const flattenColumns = [];
+    columns.forEach((column) => {
+      if (column.isColumnGroup) {
+        flattenColumns.push.apply(flattenColumns, column.columns);
+      } else {
+        flattenColumns.push(column);
+      }
+    });
+
+    let flexColumns = flattenColumns.filter((column) => typeof column.width !== 'number');
+
+    if (flexColumns.length > 0 && fit) {
+      flattenColumns.forEach((column) => {
+        bodyMinWidth += column.width || column.minWidth || 80;
+      });
+
+      if (bodyMinWidth < bodyWidth - this.gutterWidth) { // DON'T HAVE SCROLL BAR
+        this.scrollX = false;
+
+        const totalFlexWidth = bodyWidth - this.gutterWidth - bodyMinWidth;
+
+        if (flexColumns.length === 1) {
+          flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth;
+        } else {
+          const allColumnsWidth = flexColumns.reduce((prev, column) => prev + (column.minWidth || 80), 0);
+          const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
+          let noneFirstWidth = 0;
+
+          flexColumns.forEach((column, index) => {
+            if (index === 0) return;
+            const flexWidth = Math.floor((column.minWidth || 80) * flexWidthPerPixel);
+            noneFirstWidth += flexWidth;
+            column.realWidth = (column.minWidth || 80) + flexWidth;
+          });
+
+          flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
+        }
+      } else { // HAVE HORIZONTAL SCROLL BAR
+        this.scrollX = true;
+        flexColumns.forEach(function(column) {
+          column.realWidth = column.minWidth;
+        });
+      }
+
+      this.bodyWidth = Math.max(bodyMinWidth, bodyWidth);
+    } else {
+      flattenColumns.forEach((column) => {
+        if (!column.width && !column.minWidth) {
+          column.realWidth = 80;
+        }
+
+        bodyMinWidth += column.realWidth;
+      });
+      this.scrollX = bodyMinWidth > bodyWidth;
+
+      this.bodyWidth = bodyMinWidth;
+    }
+
+    const fixedColumns = this.store.states.fixedColumns;
+
+    if (fixedColumns.length > 0) {
+      let fixedWidth = 0;
+      fixedColumns.forEach(function(column) {
+        fixedWidth += column.realWidth;
+      });
+
+      this.fixedWidth = fixedWidth;
+    }
+
+    const rightFixedColumns = this.store.states.rightFixedColumns;
+    if (rightFixedColumns.length > 0) {
+      let rightFixedWidth = 0;
+      rightFixedColumns.forEach(function(column) {
+        rightFixedWidth += column.realWidth;
+      });
+
+      this.rightFixedWidth = rightFixedWidth;
+    }
+  }
+}
+
+export default TableLayout;

packages/table/src/table-store.js

+import Vue from 'vue';
+import debounce from 'throttle-debounce/debounce';
+import { orderBy } from './util';
+
+const TableStore = function(table, initialState = {}) {
+  if (!table) {
+    throw new Error('Table is required.');
+  }
+  this.table = table;
+
+  this.states = {
+    _columns: [],
+    columns: [],
+    fixedColumns: [],
+    rightFixedColumns: [],
+    _data: null,
+    data: null,
+    sortCondition: {
+      column: null,
+      property: null,
+      direction: null
+    },
+    isAllSelected: false,
+    selection: null,
+    allowNoSelection: false,
+    selectionMode: 'none',
+    selectable: null,
+    currentRow: null,
+    hoverRow: null
+  };
+
+  for (let prop in initialState) {
+    if (initialState.hasOwnProperty(prop) && this.states.hasOwnProperty(prop)) {
+      this.states[prop] = initialState[prop];
+    }
+  }
+};
+
+TableStore.prototype.mutations = {
+  setData(states, data) {
+    states._data = data;
+    if (data && data[0] && typeof data[0].$selected === 'undefined') {
+      data.forEach((item) => Vue.set(item, '$selected', false));
+    }
+    states.data = orderBy((data || []), states.sortCondition.property, states.sortCondition.direction);
+    this.updateSelectedRow();
+
+    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());
+  },
+
+  insertColumn(states, column, index) {
+    let _columns = states._columns;
+    if (typeof index !== 'undefined') {
+      _columns.splice(index, 0, column);
+    } else {
+      _columns.push(column);
+    }
+    if (column.type === 'selection') {
+      states.selectable = column.selectable;
+    }
+
+    this.scheduleLayout();
+  },
+
+  removeColumn(states, column) {
+    let _columns = states._columns;
+    if (_columns) {
+      _columns.splice(_columns.indexOf(column), 1);
+    }
+
+    this.scheduleLayout();
+  },
+
+  setHoverRow(states, row) {
+    states.hoverRow = row;
+  },
+
+  rowSelectedChanged(states) {
+    let isAllSelected = true;
+    const data = states.data || [];
+    for (let i = 0, j = data.length; i < j; i++) {
+      const item = data[i];
+      if (states.selectable) {
+        if (states.selectable.call(null, item, i) && !item.$selected) {
+          isAllSelected = false;
+          break;
+        }
+      } else {
+        if (!item.$selected) {
+          isAllSelected = false;
+          break;
+        }
+      }
+    }
+    states.isAllSelected = isAllSelected;
+  },
+
+  toggleAllSelection: debounce(10, function(states) {
+    const data = states.data || [];
+    const value = !states.isAllSelected;
+    data.forEach((item, index) => {
+      if (states.selectable) {
+        if (states.selectable.call(null, item, index)) {
+          item.$selected = value;
+        }
+      } else {
+        item.$selected = value;
+      }
+    });
+    states.isAllSelected = value;
+  }),
+
+  setSelectedRow(states, row) {
+    if (states.selectionMode === 'single') {
+      states.currentRow = row;
+    }
+  }
+};
+
+TableStore.prototype.updateColumns = function() {
+  const states = this.states;
+  const _columns = states._columns || [];
+  states.fixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === 'left');
+  states.rightFixedColumns = _columns.filter((column) => column.fixed === 'right');
+
+  if (states.fixedColumns.length > 0 && _columns[0] && _columns[0].type === 'selection' && !_columns[0].fixed) {
+    _columns[0].fixed = true;
+    states.fixedColumns.unshift(_columns[0]);
+  }
+  states.columns = [].concat(states.fixedColumns).concat(_columns.filter((column) => !column.fixed)).concat(states.rightFixedColumns);
+};
+
+TableStore.prototype.updateSelectedRow = function() {
+  const states = this.states;
+  const table = this.table;
+  const data = states.data || [];
+  if (states.selectionMode === 'single') {
+    const oldSelectedRow = states.currentRow;
+    if (oldSelectedRow === null && !states.allowNoSelection) {
+      states.currentRow = data[0];
+      if (states.currentRow !== oldSelectedRow) {
+        table.$emit('selectionchange', states.currentRow);
+      }
+    } else if (data.indexOf(oldSelectedRow) === -1) {
+      if (!states.allowNoSelection) {
+        states.currentRow = data[0];
+      } else {
+        states.currentRow = null;
+      }
+      if (states.currentRow !== oldSelectedRow) {
+        table.$emit('selectionchange', states.currentRow);
+      }
+    }
+  }
+};
+
+TableStore.prototype.scheduleLayout = function() {
+  this.table.debouncedLayout();
+};
+
+TableStore.prototype.commit = function(name, ...args) {
+  const mutations = this.mutations;
+  if (mutations[name]) {
+    mutations[name].apply(this, [this.states].concat(args));
+  }
+};
+
+export default TableStore;

packages/table/src/util.js

-var scrollBarWidth;
+let scrollBarWidth;
 
 export const getScrollBarWidth = () => {
   if (scrollBarWidth !== undefined) return scrollBarWidth;
@@ -75,7 +75,3 @@ export const orderBy = function(array, sortKey, reverse) {
     return a === b ? 0 : a > b ? order : -order;
   });
 };
-
-export const getChild = function(event) {
-  return event.target.querySelector('.cell');
-};

packages/theme-default/src/table.css

@@ -105,7 +105,7 @@
       box-sizing: border-box;
     }
 
-    @e fixed {
+    @e fixed, fixed-right {
       position: absolute;
       top: 0;
       left: 0;
@@ -123,6 +123,14 @@
       }
     }
 
+    @e fixed-right {
+      top: 0;
+      left: auto;
+      right: 0;
+
+      box-shadow: -1px 0 8px #d3d4d6;
+    }
+
     @e fixed-header-wrapper {
       position: absolute;
       left: 0;