【若依前后端分离】表格el-table列排序

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，
      },