YUDAO源码中的正序倒序表格ElmentUI的实现，与后端的配合？

前端展示和实现：

1. elmentUI表格的定义

2. JS请求参数改造

 <!-- 列表 --><el-table v-loading="loading" :data="list"   @sort-change="handleSortChange"><el-table-column label="Expiry Date" prop="expiry_date"     sortable><template slot-scope="{ column }"><span>{{ column.label }}</span><el-icon v-if="column.property === currentSort.prop" :class="currentSort.order === 'ascending' ?'el-icon-arrow-up' : 'el-icon-arrow-down'"></el-icon></template></el-table-column>

data() {return {currentSort: { // 当前排序状态prop: '', // 排序的属性order: '' // 排序顺序，可选值为 ascending 和 descending},....methods: {//捕捉事件handleSortChange({ column, prop, order }) {console.log(`排序属性: ${prop}, 排序方向: ${order}`);this.currentSort.prop = prop;this.currentSort.order = order;this.getList()// 在这里可以实现自定义排序逻辑，例如对tableData进行排序处理},
....//改造请求参数addOrderFields(){let sortingFields =[]if(this.currentSort.prop !== ''){let sortObj={field:this.currentSort.prop,order:''}if(this.currentSort.order == 'ascending'){sortObj.order = 'asc'}else{sortObj.order ='desc'}sortingFields.push(sortObj)this.queryParams.sortingFields= sortingFields}},

后端配合：

控制器：

POST方式和@RequestBody CertPageReqVO的配合

@PostMapping("/page")
@PreAuthorize("@ss.hasPermission('cert::query')")
public CommonResult<PageResult<CertRespVO>> getPage(@RequestBody CertPageReqVO pageVO ) {return success(Service.getPageOfCertRespVo(pageVO));
}

//加入排序的接收参数

@Data
@EqualsAndHashCode(callSuper = true)
@ToString(callSuper = true)
public class CertPageReqVO extends PageParam {//加入排序的接收参数private Collection<SortingField> sortingFields;

Mapper实现：

改造selectPage()

IPage<CertDO> mpPage = MyBatisUtils.buildPage(reqVO,reqVO.getSortingFields());

@Mapper
public interface CertMapper extends BaseMapperX<CertDO> {default PageResult<CertDO> selectPage(CertPageReqVO reqVO) {LambdaQueryWrapperX<CertDO> ew= new LambdaQueryWrapperX<CertDO>().likeIfPresent(CertDO::getName, reqVO.getName()).likeIfPresent(CertDO::getDescription, reqVO.getDescription()).orderByDesc(CertDO::getId);if (reqVO.PAGE_SIZE_NONE.equals(reqVO.getPageSize())) {List<CertDO> list = selectList(ew);return new PageResult<>(list, (long) list.size());}// MyBatis Plus 查询IPage<CertDO> mpPage = MyBatisUtils.buildPage(reqVO,reqVO.getSortingFields());selectPage(mpPage, ew);// 转换返回return new PageResult<>(mpPage.getRecords(), mpPage.getTotal());}

已经实现的原理