Table: remove some html DOM operations (#13643)

ElemeFE · Jan 2, 2019 · 9a45247 · 9a45247
1 parent 4f93968
commit 9a45247
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 52 deletions.
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
@@ -1,5 +1,5 @@
 import { getCell, getColumnByCell, getRowIdentity } from './util';
-import { getStyle, hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
+import { getStyle, hasClass } from 'element-ui/src/utils/dom';
 import ElCheckbox from 'element-ui/packages/checkbox';
 import ElTooltip from 'element-ui/packages/tooltip';
 import debounce from 'throttle-debounce/debounce';
@@ -103,42 +103,6 @@ export default {
     );
   },
 
-  watch: {
-    'store.states.hoverRow'(newVal, oldVal) {
-      if (!this.store.states.isComplex) return;
-      const el = this.$el;
-      if (!el) return;
-      const tr = el.querySelector('tbody').children;
-      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
-      const oldRow = rows[oldVal];
-      const newRow = rows[newVal];
-      if (oldRow) {
-        removeClass(oldRow, 'hover-row');
-      }
-      if (newRow) {
-        addClass(newRow, '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 tr = el.querySelector('tbody').children;
-      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
-      const oldRow = rows[data.indexOf(oldVal)];
-      const newRow = rows[data.indexOf(newVal)];
-      if (oldRow) {
-        removeClass(oldRow, 'current-row');
-      } else {
-        [].forEach.call(rows, row => removeClass(row, 'current-row'));
-      }
-      if (newRow) {
-        addClass(newRow, 'current-row');
-      }
-    }
-  },
-
   computed: {
     table() {
       return this.$parent;
@@ -247,6 +211,10 @@ export default {
         classes.push('current-row');
       }
 
+      if (rowIndex === this.store.states.hoverRow) {
+        classes.push('hover-row');
+      }
+
       if (this.stripe && rowIndex % 2 === 1) {
         classes.push('el-table__row--striped');
       }

diff --git a/packages/table/src/table-store.js b/packages/table/src/table-store.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import debounce from 'throttle-debounce/debounce';
 import merge from 'element-ui/src/utils/merge';
-import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
 import { orderBy, getColumnById, getRowIdentity, getColumnByKey } from './util';
 
 const sortData = (data, states) => {
@@ -193,17 +192,6 @@ TableStore.prototype.mutations = {
   changeSortCondition(states, options) {
     states.data = sortData((states.filteredData || states._data || []), states);
 
-    const { $el, highlightCurrentRow } = this.table;
-    if ($el && highlightCurrentRow) {
-      const data = states.data;
-      const tr = $el.querySelector('tbody').children;
-      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
-      const row = rows[data.indexOf(states.currentRow)];
-
-      [].forEach.call(rows, row => removeClass(row, 'current-row'));
-      addClass(row, 'current-row');
-    }
-
     if (!options || !options.silent) {
       this.table.$emit('sort-change', {
         column: this.states.sortingColumn,

diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
@@ -1773,9 +1773,10 @@ describe('Table', () => {
           <el-table-column prop="runtime" label="时长（分）" />
         </el-table>
       `,
-
-      created() {
-        this.testData = getTestData();
+      data() {
+        return {
+          testData: getTestData()
+        };
       }
     }, true);
     setTimeout(_ => {
@@ -1835,4 +1836,80 @@ describe('Table', () => {
       }, DELAY);
     }, DELAY);
   });
+
+  it('keep highlight row when data change', done => {
+    const vm = createVue({
+      template: `
+        <el-table :data="testData" highlight-current-row row-key="release">
+          <el-table-column prop="name" label="片名" />
+          <el-table-column prop="release" label="发行日期" />
+          <el-table-column prop="director" label="导演" />
+          <el-table-column prop="runtime" label="时长（分）" sortable />
+        </el-table>
+      `,
+      data() {
+        return {
+          testData: getTestData()
+        };
+      }
+    }, true);
+    setTimeout(() => {
+      let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+      triggerEvent(rows[2], 'click', true, false);
+      setTimeout(() => {
+        expect(rows[2].classList.contains('current-row')).to.be.true;
+        const data = getTestData();
+        data.splice(0, 0, {
+          id: 8,
+          name: 'Monsters, Inc.',
+          release: '2018-02-01',
+          director: 'Peter Docter',
+          runtime: 92
+        });
+        data[2].name = 'Modified Name';
+        vm.testData = data;
+
+        setTimeout(() => {
+          rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+          expect(rows[3].classList.contains('current-row')).to.be.true;
+          destroyVM(vm);
+          done();
+        }, DELAY);
+      }, DELAY);
+    }, DELAY);
+  });
+
+  it('keep highlight row after sort', done => {
+    const vm = createVue({
+      template: `
+        <el-table :data="testData" highlight-current-row row-key="release">
+          <el-table-column prop="name" label="片名" />
+          <el-table-column prop="release" label="发行日期" />
+          <el-table-column prop="director" label="导演" />
+          <el-table-column prop="runtime" label="时长（分）" sortable />
+        </el-table>
+      `,
+      data() {
+        return {
+          testData: getTestData()
+        };
+      }
+    }, true);
+    setTimeout(() => {
+      let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+      triggerEvent(rows[1], 'click', true, false);
+      setTimeout(() => {
+        expect(rows[1].classList.contains('current-row')).to.be.true;
+        const cells = vm.$el.querySelectorAll('.el-table__header-wrapper thead th > .cell');
+        triggerEvent(cells[3], 'click', true, false);
+
+        setTimeout(() => {
+          rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+          expect(rows[3].classList.contains('current-row')).to.be.true;
+          destroyVM(vm);
+          done();
+        }, DELAY);
+      }, DELAY);
+    }, DELAY);
+  });
 });