Geeker-Admin中ProTable表格分页之自定义接口页码、尺寸参数

最近挖了个新玩意儿,Geeker-Admin,看起来感觉挺好。

鼓捣了半天搞定了与服务端的API接口对接,但在表格分页的时候又遇到了问题,系统默认是pageNum/pageSize这两个参数名用来分页,而服务端是current/size,开始被注释误导,跑去修改组件,但又想起用到的接口来自多台不同的服务器,可能出现分页参数不同的情况。

在折腾的过程中,发现示例文件中有对日期参数做出过处理,而且也是我惯用的做法:

javascript 复制代码
// 如果你想在请求之前对当前请求参数做一些操作,可以自定义如下函数:params 为当前所有的请求参数(包括分页),最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getUserList(newParams);
};

这种对日期组件返回数组值进行二次处理的方式,我也经常用,于是尝试在getTableList里添加自己的分页参数。

javascript 复制代码
// 如果你想在请求之前对当前请求参数做一些操作,可以自定义如下函数:params 为当前所有的请求参数(包括分页),最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;

  //增加我自己的分页参数current/size,然后再删除默认的pageSize/pageNum,问题完美解决。
  newParams.current = newParams.pageNum
  newParams.size = newParams.pageSize
  delete newParams.pageNum
  delete newParams.pageSize
  return getUserList(newParams);
};
相关推荐
美狐美颜sdk18 小时前
从人脸关键点到动态贴图:面具特效在美颜SDK中的实现原理
前端·图像处理·人工智能·直播美颜sdk·美颜api
我命由我1234518 小时前
React Router 6 - 编程式路由导航、useInRouterContext、useNavigationType
前端·javascript·react.js·前端框架·html·ecmascript·js
威联通网络存储18 小时前
告别掉帧与素材损毁:威联通 QuTS hero 如何重塑影视后期协同工作流
前端·网络·人工智能·python
anOnion18 小时前
构建无障碍组件之Tabs Pattern
前端·html·交互设计
一招定胜负19 小时前
课堂教学质量综合评分系统
java·linux·前端
橙露19 小时前
JavaScript 异步编程:Promise、async/await 从原理到实战
开发语言·javascript·ecmascript
2301_7806698619 小时前
前端logo替换开发
前端·vue.js
启山智软19 小时前
【启山智软智能商城系统技术架构剖析】
java·前端·架构
我命由我1234520 小时前
React Router 6 - 嵌套路由、路由传递参数
前端·javascript·react.js·前端框架·html·ecmascript·js
十六年开源服务商20 小时前
2026年WordPress网站地图完整指南
java·前端·javascript