mirror of https://github.com/ElemeFE/element
Table: retain currently selected row when sorting the table. (#11348)
parent
c128914a0f
commit
b726aa0265
|
@ -1,6 +1,7 @@
|
|||
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 } from './util';
|
||||
|
||||
const sortData = (data, states) => {
|
||||
|
@ -192,6 +193,17 @@ TableStore.prototype.mutations = {
|
|||
changeSortCondition(states, options) {
|
||||
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) {
|
||||
this.table.$emit('sort-change', {
|
||||
column: this.states.sortingColumn,
|
||||
|
|
|
@ -1785,7 +1785,7 @@ describe('Table', () => {
|
|||
<el-table-column prop="name" label="片名" />
|
||||
<el-table-column prop="release" label="发行日期" />
|
||||
<el-table-column prop="director" label="导演" />
|
||||
<el-table-column prop="runtime" label="时长(分)" />
|
||||
<el-table-column prop="runtime" label="时长(分)" sortable />
|
||||
</el-table>
|
||||
`,
|
||||
|
||||
|
@ -1800,12 +1800,22 @@ describe('Table', () => {
|
|||
expect(tr.classList.contains('current-row')).to.be.true;
|
||||
const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
|
||||
|
||||
triggerEvent(rows[2], 'click', true, false);
|
||||
triggerEvent(rows[1], 'click', true, false);
|
||||
setTimeout(_ => {
|
||||
expect(tr.classList.contains('current-row')).to.be.false;
|
||||
expect(rows[2].classList.contains('current-row')).to.be.true;
|
||||
destroyVM(vm);
|
||||
done();
|
||||
expect(rows[1].classList.contains('current-row')).to.be.true;
|
||||
|
||||
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);
|
||||
|
|
Loading…
Reference in New Issue