github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: retain currently selected row when sorting the table. (#11348)

pull/11351/head
Jikkai Xiao 2018-05-25 17:47:27 +08:00 committed by 杨奕
parent c128914a0f
commit b726aa0265
2 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/table/src/table-store.js
View File

@ -1,6 +1,7 @@
import Vue from 'vue'; import Vue from 'vue';
import debounce from 'throttle-debounce/debounce'; import debounce from 'throttle-debounce/debounce';
import merge from 'element-ui/src/utils/merge'; import merge from 'element-ui/src/utils/merge';
import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
import { orderBy, getColumnById, getRowIdentity } from './util'; import { orderBy, getColumnById, getRowIdentity } from './util';
const sortData = (data, states) => { const sortData = (data, states) => {
@ -192,6 +193,17 @@ TableStore.prototype.mutations = {
changeSortCondition(states, options) { changeSortCondition(states, options) {
states.data = sortData((states.filteredData || states._data || []), states); states.data = sortData((states.filteredData || states._data || []), states);
const el = this.table.$el;
if (el) {
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) { if (!options || !options.silent) {
this.table.$emit('sort-change', { this.table.$emit('sort-change', {
column: this.states.sortingColumn, column: this.states.sortingColumn,

20
test/unit/specs/table.spec.js
View File

@ -1785,7 +1785,7 @@ describe('Table', () => {
<el-table-column prop="name" label="片名" /> <el-table-column prop="name" label="片名" />
<el-table-column prop="release" label="发行日期" /> <el-table-column prop="release" label="发行日期" />
<el-table-column prop="director" label="导演" /> <el-table-column prop="director" label="导演" />
<el-table-column prop="runtime" label="时长（分）" /> <el-table-column prop="runtime" label="时长（分）" sortable />
</el-table> </el-table>
`, `,
@ -1800,12 +1800,22 @@ describe('Table', () => {
expect(tr.classList.contains('current-row')).to.be.true; expect(tr.classList.contains('current-row')).to.be.true;
const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr'); const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
triggerEvent(rows[2], 'click', true, false); triggerEvent(rows[1], 'click', true, false);
setTimeout(_ => { setTimeout(_ => {
expect(tr.classList.contains('current-row')).to.be.false; expect(tr.classList.contains('current-row')).to.be.false;
expect(rows[2].classList.contains('current-row')).to.be.true; expect(rows[1].classList.contains('current-row')).to.be.true;
destroyVM(vm);
done(); const ths = vm.$el.querySelectorAll('.el-table__header-wrapper thead th');
triggerEvent(ths[3], 'click', true, false);
setTimeout(_ => {
const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
expect(rows[1].classList.contains('current-row')).to.be.false;
expect(rows[3].classList.contains('current-row')).to.be.true;
destroyVM(vm);
done();
}, DELAY);
}, DELAY); }, DELAY);
}, DELAY); }, DELAY);
}, DELAY); }, DELAY);