Skip to content

Commit bc2839d

Browse files
huangshuweihuangshuwei
authored
Merge pull request #407 from timefordroids/sortable-column
call sortChange on th click
2 parents 5d272eb + 6dbae2a commit bc2839d

File tree

4 files changed

+34
-12
lines changed

4 files changed

+34
-12
lines changed

‎packages/style/ve-table.less‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
height: 16px;
9090
margin-left: 5px;
9191
color: @ve-table-sort-icon-default-color;
92-
cursor: pointer;
92+
pointer-events: none;
9393
.ve-table-sort-icon {
9494
position: absolute;
9595
display: block;
@@ -108,6 +108,10 @@
108108
}
109109
}
110110

111+
&.ve-table-sortable-column {
112+
cursor: pointer;
113+
}
114+
111115
/* filter */
112116
.ve-table-filter {
113117
display: inline-block;

‎packages/ve-table/src/header/header-th.jsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,19 @@ export default {
165165
}
166166
}
167167

168+
return result;
169+
},
170+
// is sortable column
171+
isSortableCloumn() {
172+
let result = false;
173+
174+
const { sortColumns, groupColumnItem } = this;
175+
const currentField = groupColumnItem.field;
176+
177+
if (Object.keys(sortColumns).includes(currentField)) {
178+
result = true;
179+
}
180+
168181
return result;
169182
},
170183
},
@@ -183,6 +196,7 @@ export default {
183196
[clsName("first-right-fixed-column")]:
184197
this.isfirstRightFixedColumn,
185198
[clsName("last-column")]: this.isLastCloumn,
199+
[clsName("sortable-column")]: this.isSortableCloumn,
186200
};
187201

188202
const {
@@ -378,9 +392,6 @@ export default {
378392

379393
const props = {
380394
class: clsName("sort"),
381-
on: {
382-
click: () => this.sortChange(),
383-
},
384395
};
385396

386397
result = (
@@ -592,6 +603,13 @@ export default {
592603
const events = {
593604
click: (e) => {
594605
this.cellClick(e, click);
606+
607+
if (
608+
this.isSortableCloumn &&
609+
e.target instanceof HTMLTableCellElement
610+
) {
611+
this.sortChange();
612+
}
595613
},
596614
dblclick: (e) => {
597615
this.cellDblclick(e, dblclick);

‎tests/unit/specs/__snapshots__/ve-table-header-sort.spec.js.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ exports[`veTable header sort render multiple field sort 1`] = `
1616
<thead class="ve-table-fixed-header ve-table-header">
1717
<tr class="ve-table-header-tr">
1818
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: left; top: 0px;">Name</th>
19-
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Age<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
20-
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Weight(kg)<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top active"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
19+
<th rowspan="1" colspan="1" class="ve-table-header-th ve-table-sortable-column" style="text-align: center; top: 0px;">Age<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
20+
<th rowspan="1" colspan="1" class="ve-table-header-th ve-table-sortable-column" style="text-align: center; top: 0px;">Weight(kg)<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top active"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
2121
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Hobby</th>
2222
<th rowspan="1" colspan="1" class="ve-table-header-th ve-table-last-column" style="text-align: left; top: 0px;">Address</th>
2323
</tr>
@@ -96,8 +96,8 @@ exports[`veTable header sort render single field sort 1`] = `
9696
<thead class="ve-table-fixed-header ve-table-header">
9797
<tr class="ve-table-header-tr">
9898
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: left; top: 0px;">Name</th>
99-
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Age<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
100-
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Weight(kg)<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top active"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
99+
<th rowspan="1" colspan="1" class="ve-table-header-th ve-table-sortable-column" style="text-align: center; top: 0px;">Age<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
100+
<th rowspan="1" colspan="1" class="ve-table-header-th ve-table-sortable-column" style="text-align: center; top: 0px;">Weight(kg)<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top active"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
101101
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Hobby</th>
102102
<th rowspan="1" colspan="1" class="ve-table-header-th ve-table-last-column" style="text-align: left; top: 0px;">Address</th>
103103
</tr>

‎tests/unit/specs/ve-table-header-sort.spec.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ describe("veTable header sort", () => {
217217
.exists(),
218218
).toBe(true);
219219

220-
thEls.at(1).find(".ve-table-sort").trigger("click");
220+
thEls.at(1).find(".ve-table-sortable-column").trigger("click");
221221

222222
await later();
223223

@@ -361,7 +361,7 @@ describe("veTable header sort", () => {
361361
.exists(),
362362
).toBe(true);
363363

364-
thEls.at(1).find(".ve-table-sort").trigger("click");
364+
thEls.at(1).find(".ve-table-sortable-column").trigger("click");
365365

366366
await later();
367367

@@ -425,7 +425,7 @@ describe("veTable header sort", () => {
425425

426426
const thEls = wrapper.findAll(".ve-table-header-tr th");
427427

428-
thEls.at(1).find(".ve-table-sort").trigger("click");
428+
thEls.at(1).find(".ve-table-sortable-column").trigger("click");
429429

430430
await later();
431431

@@ -434,7 +434,7 @@ describe("veTable header sort", () => {
434434
weight: "",
435435
});
436436

437-
thEls.at(1).find(".ve-table-sort").trigger("click");
437+
thEls.at(1).find(".ve-table-sortable-column").trigger("click");
438438

439439
await later();
440440

0 commit comments

Comments
 (0)