vue.js elementui javascript 排序 YUDAO源码中的正序倒序表格ElmentUI的实现，与后端的配合？

前端展示和实现：

1. elmentUI表格的定义

2. JS请求参数改造

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> getPage(@RequestBody CertPageReqVO pageVO ) {

return success(Service.getPageOfCertRespVo(pageVO));

}

 //加入排序的接收参数 

@Data

@EqualsAndHashCode(callSuper = true)

@ToString(callSuper = true)

public class CertPageReqVO extends PageParam {

//加入排序的接收参数

private Collection sortingFields;

Mapper实现：

改造selectPage()

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

@Mapper

public interface CertMapper extends BaseMapperX {

default PageResult selectPage(CertPageReqVO reqVO) {

LambdaQueryWrapperX ew= new LambdaQueryWrapperX()

.likeIfPresent(CertDO::getName, reqVO.getName())

.likeIfPresent(CertDO::getDescription, reqVO.getDescription())

.orderByDesc(CertDO::getId);

if (reqVO.PAGE_SIZE_NONE.equals(reqVO.getPageSize())) {

List list = selectList(ew);

return new PageResult<>(list, (long) list.size());

}

// MyBatis Plus 查询

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

selectPage(mpPage, ew);

// 转换返回

return new PageResult<>(mpPage.getRecords(), mpPage.getTotal());

}

已经实现的原理 

精彩内容

 您阅读本篇文章共花了：