Skip to content

Commit 80ca057

Browse files
author
黄书伟
committed
Table 组件新增还原排序规则的方法 resetOrder() #81 
1 parent 8ee36d9 commit 80ca057

File tree

2 files changed

+88
-65
lines changed

2 files changed

+88
-65
lines changed

‎packages/v-table/src/sort-control-mixin.js‎

Lines changed: 73 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,72 +2,111 @@
22
* 排序
33
* */
44
export default {
5+
6+
data(){
7+
8+
return {
9+
sortColumns: {}
10+
}
11+
},
12+
513
methods: {
614
// 是否允许排序
715
enableSort(val){
816
return typeof val === 'string' ? true : false;
917
},
1018
// 允许排序的列集合
11-
sortColumns(){
19+
setSortColumns(){
1220
var self = this, sortColumns = {},
13-
collection = self.titleRowsToSortInfo.length > 0 ? self.titleRowsToSortInfo : self.internalColumns;
21+
titleRowsToSortInfo = [];
22+
23+
if (self.internalTitleRows.length > 0) {
24+
self.internalTitleRows.filter(function (row) {
25+
row.filter(function (column, index) {
26+
if (typeof column.orderBy === 'string' && column.fields.length === 1) {
27+
column.field = column.fields[0];
28+
titleRowsToSortInfo.push(column);
29+
}
30+
})
31+
})
32+
}
33+
34+
let collection = titleRowsToSortInfo.length > 0 ? titleRowsToSortInfo : self.internalColumns;
1435

1536
collection.filter(function (item, index) {
1637
if (self.enableSort(item.orderBy)) {
1738
sortColumns[item.field] = item.orderBy;
1839
}
1940
})
2041

21-
return sortColumns;
42+
this.sortColumns = sortColumns;
43+
44+
this.singleSortInit();
45+
},
46+
47+
// 获取当前排序规则
48+
getCurrentSort(field){
49+
50+
return this.sortColumns[field];
2251
},
2352

2453
// 排序控制
25-
sortControl(field, orderBy){
54+
sortControl(field){
2655

27-
var self = this,
28-
collection = self.titleRowsToSortInfo.length > 0 ? self.titleRowsToSortInfo : self.internalColumns;
56+
let orderBy = this.sortColumns[field];
2957

30-
if (self.enableSort(orderBy)) {
31-
collection.filter(function (column, index) {
58+
if (this.enableSort(orderBy)) {
3259

33-
if (self.enableSort(column.orderBy) && column.field === field) {
60+
if (this.sortAlways) {
3461

35-
if (self.sortAlways) {
62+
this.sortColumns[field] = orderBy === 'asc' ? 'desc' : 'asc';
63+
} else {
3664

37-
column.orderBy = column.orderBy === 'asc' ? 'desc' : 'asc';
38-
} else {
65+
this.sortColumns[field] = orderBy === 'asc' ? 'desc' :
66+
(this.sortColumns[field] === 'desc' ? '' : 'asc');
67+
}
3968

40-
column.orderBy = column.orderBy === 'asc' ? 'desc' :
41-
(column.orderBy === 'desc' ? '' : 'asc');
42-
}
43-
}
69+
if (!this.multipleSort){
70+
71+
for (var col in this.sortColumns) {
4472

45-
if (!self.multipleSort) {
46-
if (column.field !== field && self.enableSort(column.orderBy)) {
47-
column.orderBy = '';
73+
if (col !== field) {
74+
75+
this.sortColumns[col] = '';
4876
}
4977
}
50-
})
78+
}
5179

52-
self.$emit('sort-change', self.sortColumns());
80+
this.$emit('sort-change', this.sortColumns);
5381
}
82+
5483
},
55-
// 只允许保留第一个排序规则（‘asc’或者‘desc’）
56-
singelSortInit(){
84+
85+
// 单排时只允许保留第一个排序规则（‘asc’或者‘desc’）
86+
singleSortInit(){
87+
5788
var self = this,
58-
result = false,
59-
collection;
60-
if (!self.multipleSort) {
61-
collection = self.titleRowsToSortInfo.length > 0 ? self.titleRowsToSortInfo : self.internalColumns;
62-
collection.filter(function (item, index) {
63-
if (self.enableSort(item.orderBy) && item.orderBy !== '') {
64-
if (result) {
65-
item.orderBy = '';
66-
}
67-
result = true;
89+
result = false;
90+
91+
if (!self.multipleSort && self.sortColumns) {
92+
93+
for (var col in self.sortColumns) {
94+
95+
if (result) {
96+
97+
self.sortColumns[col] = '';
6898
}
69-
})
99+
result = true;
100+
}
70101
}
102+
},
103+
104+
// 对外暴露的方法（重置排序规则）
105+
resetOrder(){
106+
107+
this.setSortColumns();
108+
109+
this.$emit('sort-change', this.sortColumns);
71110
}
72111
}
73112
}

‎packages/v-table/src/table.vue‎

Lines changed: 15 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
></v-checkbox>
3636
</span>
3737
<span v-else v-html="col.title"></span>
38-
<span @click.stop="sortControl(col.fields[0],col.orderBy)"
38+
<span @click.stop="sortControl(col.fields[0])"
3939
class="v-table-sort-icon" v-if="enableSort(col.orderBy)">
40-
<i :class='["v-icon-up-dir",col.orderBy ==="asc" ? "checked":""]'></i>
41-
<i :class='["v-icon-down-dir",col.orderBy ==="desc" ? "checked":""]'></i>
40+
<i :class='["v-icon-up-dir",getCurrentSort(col.field) ==="asc" ? "checked":""]'></i>
41+
<i :class='["v-icon-down-dir",getCurrentSort(col.field) ==="desc" ? "checked":""]'></i>
4242
</span>
4343
</span>
4444
</div>
@@ -68,10 +68,10 @@
6868
></v-checkbox>
6969
</span>
7070
<span v-else v-html="col.title"></span>
71-
<span @click.stop="sortControl(col.field,col.orderBy)"
71+
<span @click.stop="sortControl(col.field)"
7272
class="v-table-sort-icon" v-if="enableSort(col.orderBy)">
73-
<i :class='["v-icon-up-dir",col.orderBy ==="asc" ? "checked":""]'></i>
74-
<i :class='["v-icon-down-dir",col.orderBy ==="desc" ? "checked":""]'></i>
73+
<i :class='["v-icon-up-dir",getCurrentSort(col.field) ==="asc" ? "checked":""]'></i>
74+
<i :class='["v-icon-down-dir",getCurrentSort(col.field) ==="desc" ? "checked":""]'></i>
7575
</span>
7676
</span>
7777
</div>
@@ -188,10 +188,10 @@
188188
<span class="table-title">
189189
<span v-if="col.type === 'selection'"></span>
190190
<span v-else v-html="col.title"></span>
191-
<span @click.stop="sortControl(col.fields[0],col.orderBy)"
191+
<span @click.stop="sortControl(col.fields[0])"
192192
class="v-table-sort-icon" v-if="enableSort(col.orderBy)">
193-
<i :class='["v-icon-up-dir",col.orderBy ==="asc" ? "checked":""]'></i>
194-
<i :class='["v-icon-down-dir",col.orderBy ==="desc" ? "checked":""]'></i>
193+
<i :class='["v-icon-up-dir",getCurrentSort(col.field) ==="asc" ? "checked":""]'></i>
194+
<i :class='["v-icon-down-dir",getCurrentSort(col.field) ==="desc" ? "checked":""]'></i>
195195
</span>
196196
</span>
197197
</div>
@@ -221,11 +221,11 @@
221221
></v-checkbox>
222222
</span>
223223
<span v-else v-html="col.title"></span>
224-
<span @click.stop="sortControl(col.field,col.orderBy)"
224+
<span @click.stop="sortControl(col.field)"
225225
class="v-table-sort-icon"
226226
v-if="enableSort(col.orderBy)">
227-
<i :class='["v-icon-up-dir",col.orderBy ==="asc" ? "checked":""]'></i>
228-
<i :class='["v-icon-down-dir",col.orderBy ==="desc" ? "checked":""]'></i>
227+
<i :class='["v-icon-up-dir",getCurrentSort(col.field) ==="asc" ? "checked":""]'></i>
228+
<i :class='["v-icon-down-dir",getCurrentSort(col.field) ==="desc" ? "checked":""]'></i>
229229
</span>
230230
</span>
231231
</div>
@@ -597,24 +597,6 @@
597597
return result;
598598
},
599599
600-
// 将复杂表头配置数据简单化
601-
titleRowsToSortInfo(){
602-
var result = [], self = this;
603-
604-
if (self.internalTitleRows.length > 0) {
605-
self.internalTitleRows.filter(function (row) {
606-
row.filter(function (column, index) {
607-
if (typeof column.orderBy === 'string' && column.fields.length === 1) {
608-
column.field = column.fields[0];
609-
result.push(column);
610-
}
611-
})
612-
})
613-
}
614-
return result;
615-
},
616-
617-
618600
// 所有列的总宽度
619601
totalColumnsWidth(){
620602
return this.internalColumns.reduce(function (total, curr) {
@@ -747,6 +729,8 @@
747729
748730
this.initTableWidth();
749731
732+
this.setSortColumns();
733+
750734
751735
var self = this, widthCountCheck = 0;
752736
@@ -840,7 +824,7 @@
840824
this.scrollControl();
841825
}
842826
843-
this.singelSortInit();
827+
//this.singleSortInit();
844828
845829
this.controlScrollBar();
846830
},

0 commit comments

Comments
 (0)