# el-table表格排序功能
template
<el-table
:key="tableKey"
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
style="width: 100%;"
@sort-change="sortChange"
>
.....
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
js:
sortChange(data) {
const { prop, order } = data
if (prop === 'id') {
this.sortByID(order)
}
},
// 赋值查询参数
sortByID(order) {
// 如果为升序
if (order === 'ascending') {
this.listQuery.sort = '+id'
} else {
// 为降序
this.listQuery.sort = '-id'
}
this.handleFilter()
},
// 获取查询条件, 重新发送请求
handleFilter() {
// 获取查询参数
console.log('handleFilter', this.listQuery)
// 获取 某某数据列表
this.getList()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24