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

Table: support table sort (#1918)

pull/1952/head
kingwl 2016-12-23 12:11:17 +08:00 committed by cinwell.li
parent 7489be0af5
commit 6f75ca6150
2 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/table/src/table-header.js
View File

@ -112,9 +112,9 @@ export default {
} }
{ {
column.sortable column.sortable
? <span class="caret-wrapper" on-click={ ($event) => this.handleHeaderClick($event, column) }> ? <span class="caret-wrapper">
<i class="sort-caret ascending"></i> <i class="sort-caret ascending" on-click={ ($event) => this.handleHeaderClick($event, column, 'ascending')}></i>
<i class="sort-caret descending"></i> <i class="sort-caret descending" on-click={ ($event) => this.handleHeaderClick($event, column, 'descending')}></i>
</span> </span>
: '' : ''
} }
@ -332,7 +332,7 @@ export default {
document.body.style.cursor = ''; document.body.style.cursor = '';
}, },
handleHeaderClick(event, column) { handleHeaderClick(event, column, order) {
let target = event.target; let target = event.target;
while (target && target.tagName !== 'TH') { while (target && target.tagName !== 'TH') {
target = target.parentNode; target = target.parentNode;
@ -360,15 +360,14 @@ export default {
sortProp = column.property; sortProp = column.property;
} }
if (!column.order) { if (column.order === order) {
sortOrder = column.order = 'ascending';
} else if (column.order === 'ascending') {
sortOrder = column.order = 'descending';
} else {
sortOrder = column.order = null; sortOrder = column.order = null;
states.sortingColumn = null; states.sortingColumn = null;
sortProp = null; sortProp = null;
} else {
sortOrder = column.order = order;
} }
states.sortProp = sortProp; states.sortProp = sortProp;
states.sortOrder = sortOrder; states.sortOrder = sortOrder;

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

@ -981,7 +981,7 @@ describe('Table', () => {
}); });
setTimeout(_ => { setTimeout(_ => {
const elm = vm.$el.querySelector('.caret-wrapper'); const elm = vm.$el.querySelector('.caret-wrapper > .ascending');
elm.click(); elm.click();
setTimeout(_ => { setTimeout(_ => {
@ -1003,7 +1003,7 @@ describe('Table', () => {
} }
}, '@sort-change="sortChange"'); }, '@sort-change="sortChange"');
setTimeout(_ => { setTimeout(_ => {
const elm = vm.$el.querySelector('.caret-wrapper'); const elm = vm.$el.querySelector('.caret-wrapper > .ascending');
elm.click(); elm.click();
setTimeout(_ => { setTimeout(_ => {
@ -1019,7 +1019,7 @@ describe('Table', () => {
const vm = createTable('', '', '', 'sortable'); const vm = createTable('', '', '', 'sortable');
it('ascending', done => { it('ascending', done => {
const elm = vm.$el.querySelector('.caret-wrapper'); const elm = vm.$el.querySelector('.caret-wrapper > .ascending');
elm.click(); elm.click();
setTimeout(_ => { setTimeout(_ => {
@ -1031,7 +1031,7 @@ describe('Table', () => {
}); });
it('descending', done => { it('descending', done => {
const elm = vm.$el.querySelector('.caret-wrapper'); const elm = vm.$el.querySelector('.caret-wrapper > .descending');
elm.click(); elm.click();
setTimeout(_ => { setTimeout(_ => {