Merge pull request #1014 from furybean/slow-table-hover

Table: fix hover effect is slow when data > 200.

packages/table/src/table-body.js

@@ -1,4 +1,4 @@
-import { getValueByPath, getCell, getColumnById, getColumnByCell } from './util';
+import { getValueByPath, getCell, getColumnByCell } from './util';
 
 export default {
   props: {
@@ -42,9 +42,7 @@ export default {
                       on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                       on-mouseleave={ this.handleCellMouseLeave }>
                       {
-                        column.renderCell
-                          ? column.renderCell.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>
+                        column.renderCell.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.$parent.$vnode.context })
                       }
                     </td>
                   )
@@ -60,15 +58,42 @@ export default {
     );
   },
 
+  watch: {
+    'store.states.hoverRow'(newVal, oldVal) {
+      const el = this.$el;
+      if (!el) return;
+      const rows = el.querySelectorAll('tr');
+      const oldRow = rows[oldVal];
+      const newRow = rows[newVal];
+      if (oldRow) {
+        oldRow.classList.remove('hover-row');
+      }
+      if (newRow) {
+        newRow.classList.add('hover-row');
+      }
+    },
+    'store.states.currentRow'(newVal, oldVal) {
+      if (!this.highlight) return;
+      const el = this.$el;
+      if (!el) return;
+      const data = this.store.states.data;
+      const rows = el.querySelectorAll('tr');
+      const oldRow = rows[data.indexOf(oldVal)];
+      const newRow = rows[data.indexOf(newVal)];
+      if (oldRow) {
+        oldRow.classList.remove('current-row');
+      }
+      if (newRow) {
+        newRow.classList.add('current-row');
+      }
+    }
+  },
+
   computed: {
     data() {
       return this.store.states.data;
     },
 
-    hoverRowIndex() {
-      return this.store.states.hoverRow;
-    },
-
     columnsCount() {
       return this.store.states.columns.length;
     },
@@ -105,9 +130,6 @@ export default {
 
     getRowClass(row, index) {
       const classes = [];
-      if (this.hoverRowIndex === index) {
-        classes.push('hover-row');
-      }
 
       const rowClassName = this.rowClassName;
       if (typeof rowClassName === 'string') {
@@ -116,11 +138,6 @@ export default {
         classes.push(rowClassName.apply(null, [row, index]) || '');
       }
 
-      const currentRow = this.store.states.currentRow;
-      if (this.highlight && currentRow === row) {
-        classes.push('current-row');
-      }
-
       return classes.join(' ');
     },
 
@@ -172,12 +189,15 @@ export default {
       table.$emit('row-click', row, event);
     },
 
-    getCellContent(row, property, columnId) {
-      const column = getColumnById(this.$parent, columnId);
+    getCellContent(row, property, column) {
       if (column && column.formatter) {
         return column.formatter(row, column);
       }
 
+      if (property && property.indexOf('.') === -1) {
+        return row[property];
+      }
+
       return getValueByPath(row, property);
     }
   }

packages/table/src/table-column.js

@@ -73,7 +73,7 @@ const getDefaultColumn = function(type, options) {
 };
 
 const DEFAULT_RENDER_CELL = function(h, { row, column }, parent) {
-  return <span>{ parent.getCellContent(row, column.property, column.id) }</span>;
+  return parent.getCellContent(row, column.property, column);
 };
 
 export default {