|
|
@@ -114,9 +114,9 @@ export default {
|
|
|
}
|
|
|
{
|
|
|
column.sortable
|
|
|
- ? <span class="caret-wrapper">
|
|
|
- <i class="sort-caret ascending" on-click={ ($event) => this.handleHeaderClick($event, column, 'ascending')}></i>
|
|
|
- <i class="sort-caret descending" on-click={ ($event) => this.handleHeaderClick($event, column, 'descending')}></i>
|
|
|
+ ? <span class="caret-wrapper" on-click={ ($event) => this.handleHeaderClick($event, column) }>
|
|
|
+ <i class="sort-caret ascending"></i>
|
|
|
+ <i class="sort-caret descending"></i>
|
|
|
</span>
|
|
|
: ''
|
|
|
}
|
|
|
@@ -150,7 +150,12 @@ export default {
|
|
|
layout: {
|
|
|
required: true
|
|
|
},
|
|
|
- border: Boolean
|
|
|
+ border: Boolean,
|
|
|
+ defaultSortProp: String,
|
|
|
+ defaultSortOrder: {
|
|
|
+ type: String,
|
|
|
+ default: 'ascending'
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
components: {
|
|
|
@@ -184,6 +189,23 @@ export default {
|
|
|
this.filterPanels = {};
|
|
|
},
|
|
|
|
|
|
+ mounted() {
|
|
|
+ const states = this.store.states;
|
|
|
+ states.sortProp = this.defaultSortProp;
|
|
|
+ states.sortOrder = this.defaultSortOrder;
|
|
|
+
|
|
|
+ this.$nextTick(_ => {
|
|
|
+ for (let i = 0, length = this.columns.length; i < length; i++) {
|
|
|
+ if (this.columns[i].property === this.defaultSortProp) {
|
|
|
+ this.columns[i].order = this.defaultSortOrder;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.store.commit('changeSortCondition');
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
beforeDestroy() {
|
|
|
const panels = this.filterPanels;
|
|
|
for (let prop in panels) {
|
|
|
@@ -336,7 +358,16 @@ export default {
|
|
|
document.body.style.cursor = '';
|
|
|
},
|
|
|
|
|
|
- handleHeaderClick(event, column, order) {
|
|
|
+ toggleOrder(column) {
|
|
|
+ if (column.order === 'ascending') {
|
|
|
+ return 'descending';
|
|
|
+ }
|
|
|
+ return 'ascending';
|
|
|
+ },
|
|
|
+
|
|
|
+ handleHeaderClick(event, column) {
|
|
|
+ let order = this.toggleOrder(column);
|
|
|
+
|
|
|
let target = event.target;
|
|
|
while (target && target.tagName !== 'TH') {
|
|
|
target = target.parentNode;
|
baiyaaaaa