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

这篇具有很好参考价值的文章主要介绍了YUDAO源码中的正序倒序表格ElmentUI的实现，与后端的配合？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端展示和实现：

1. elmentUI表格的定义

2. JS请求参数改造

YUDAO源码中的正序倒序表格ElmentUI的实现，与后端的配合？,编程羔手之羔才生,vue.js,elementui,javascript,yudao,排序

 <!-- 列表 -->
    <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());
    }

已经实现的原理

YUDAO源码中的正序倒序表格ElmentUI的实现，与后端的配合？,编程羔手之羔才生,vue.js,elementui,javascript,yudao,排序文章来源地址https://www.toymoban.com/news/detail-857086.html