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

已经实现的原理

相关推荐
@解忧杂货铺1 小时前
前端vue如何实现数字框中通过鼠标滚轮上下滚动增减数字
前端·javascript·vue.js
苹果酱05673 小时前
「Mysql优化大师一」mysql服务性能剖析工具
java·vue.js·spring boot·mysql·课程设计
真的很上进6 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203986 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
supermapsupport8 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
m0_748254888 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
噢,我明白了9 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
sanguine__10 小时前
APIs-day2
javascript·css·css3
苹果醋310 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计
关你西红柿子10 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv