1. 默认列排序--以字典表为例
基于若依前后端分离版本,如果进入页面想要根据某一列排序,仅修改下列代码即可:
在queryParams中加入orderByColumn和isAsc参数即可。
orderByColumn:排序列
isAsc:排序方向,desc或者asc
pageSize:每页显示记录数
pageNum:当前记录起始索引
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
orderByColumn:"createTime",
isAsc:"asc",
dictName: undefined,
dictType: undefined,
status: undefined,
},
请求如下,表格就会根据createTime列自动排序了
2.点击某列进行排序,全排序--以字典表为例
排序直接在el-table-column使用sortable时,只会对当前页进行顺序或逆序排序。如果存在分页情况不会对其他页面进行排序,就不是很方便。下列方法会在点击排序箭头时与后端交互,重新获取表格内容,具体实现如下。
(1)el-table中加入@sort-change="sortChange"
(2)el-table-column中加入sortable="custom"
<el-table v-loading="loading" :data="typeList"
@selection-change="handleSelectionChange"
@sort-change="sortChange">
<el-table-column label="字典编号" align="center" prop="dictId" sortable="custom" fixed />
(3)sortChange方法,如果每次点击排序返回第一页,加入this.queryParams.pageNum=1;
//排序列
sortChange(data) {
const { prop, order } = data
//排序列
this.queryParams.orderByColumn=prop;
//排序顺序ascending或descending
this.queryParams.isAsc=order;
//返回第一页
this.queryParams.pageNum=1;
this.getList();
},
(4)queryParams中加入orderByColumn和isAsc参数,可以为空,也可以默认其他字段和排序方式
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
orderByColumn:"createTime",
isAsc:"asc",
dictName: undefined,
dictType: undefined,
status: undefined,
},