实现效果如下:
一、当页数据排序
如果只想要当前页面排序,只会涉及到前端,只需在<el-table-column>标签上添加 :sortable="true"即可
二、自定义排序
如果想要全局排序,需要自定义排序函数,请求后台排序后在分页。
1、自定义排序函数,在<el-table>上添加
@sort-change="sortChange"
2、在要排序的列上加上
sortable="custom"
3、实现排序函数sortChange
//自定义排序列表
sortChange(data) {
const { prop, order } = data
//排序列
this.queryParams.orderByColumn = prop;
//排序顺序ascending或descending
this.queryParams.isAsc = order;
//返回第一页
this.queryParams.pageNum = 1;
//刷新列表
this.getList();
},