diff --git a/packages/table/src/store/watcher.js b/packages/table/src/store/watcher.js index 8ea37e6f6..c657f2591 100644 --- a/packages/table/src/store/watcher.js +++ b/packages/table/src/store/watcher.js @@ -266,6 +266,9 @@ export default Vue.extend({ }, updateSort(column, prop, order) { + if (this.states.sortingColumn && this.states.sortingColumn !== column) { + this.states.sortingColumn.order = null; + } this.states.sortingColumn = column; this.states.sortProp = prop; this.states.sortOrder = order; diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js index abfe334b4..df4208b2e 100644 --- a/test/unit/specs/table.spec.js +++ b/test/unit/specs/table.spec.js @@ -1753,11 +1753,47 @@ describe('Table', () => { vm.$nextTick(() => { expect(toArray(lastCells).map(node => node.textContent)) .to.eql(['-100', '-95', '-92', '-92', '-80']); + destroyVM(vm); done(); }); }); }, DELAY); }); + + it('sort correct change icon', async() => { + function assertSortIconCount($el, msg, count = 1) { + const sortIconCount = $el.querySelectorAll('th.ascending, th.descending').length; + expect(sortIconCount).to.equal(count, msg); + } + + const vm = createVue({ + template: ` + + + + + + + `, + data() { + return { testData: getTestData() }; + } + }); + await waitImmediate(); + assertSortIconCount(vm.$el, 'sorting icon is not empty after mount', 0); + // manual click first column header + const elm = vm.$el.querySelector('.caret-wrapper'); + elm.click(); + await waitImmediate(); + assertSortIconCount(vm.$el, 'sorting icon is not one after click header'); + vm.$refs.table.sort('director', 'descending'); + await waitImmediate(); + assertSortIconCount(vm.$el, 'sorting icon is not one after call sort'); + vm.$refs.table.sort('director', 'ascending'); + await waitImmediate(); + assertSortIconCount(vm.$el, 'sorting icon is not one after sort same column'); + destroyVM(vm); + }); }); it('hover', async() => {