diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index c3f2c5516..c716ee32f 100644
--- 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
index f12036899..2928e7b40 100644
--- 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
index 52cc4148c..c28769084 100644
--- a/test/unit/specs/table.spec.js
+++ b/test/unit/specs/table.spec.js
@@ -1773,9 +1773,10 @@ describe('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: `
+
+
+
+
+
+
+ `,
+ 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: `
+
+
+
+
+
+
+ `,
+ 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);
+ });
});