From 9a45247f6ecc7355f8611d2b55f51a7a58aba1d7 Mon Sep 17 00:00:00 2001 From: HarlanLuo Date: Wed, 2 Jan 2019 15:54:18 +0800 Subject: [PATCH] Table: remove some html DOM operations (#13643) --- packages/table/src/table-body.js | 42 ++-------------- packages/table/src/table-store.js | 12 ----- test/unit/specs/table.spec.js | 83 +++++++++++++++++++++++++++++-- 3 files changed, 85 insertions(+), 52 deletions(-) diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index e48c8d2a93..611ad6f26f 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 f12036899f..2928e7b40f 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 52cc4148c2..c287690843 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); + }); });