当前位置: 首页 > news >正文

vue3 vxe-grid修改currentPage,查询数据的时候,从第一页开始查询

1、当我们设置好VxeGrid.Options进行数据查询的时候,下面是可能的设置:

 const gridOptions = reactive<BasicTableProps>({id: 'UserTable',showHeaderOverflow: false,showOverflow: true,keepSource: true,columns: userColumns,size: 'small',pagerConfig: {currentPage: 1,pageSize: 100,pageSizes: [10, 20, 50, 100, 200, 500, 1000],},toolbarConfig: {slots: { buttons: 'toolbar_buttons' },refresh: false,import: false,print: false,zoom: false,export: false,custom: false,},proxyConfig: {props: {// 对应响应结果 Promise<{ result: [], page: { total: 100 } }>result: 'items', // 配置响应结果列表字段total: 'total', // 配置响应结果总页数字段},ajax: {query: async ({ page, form }) => {return getUserList({page: page.currentPage,pageSize: page.pageSize,fieldname: searchForm.fieldname,fieldreq: searchForm.fieldreq,fieldvalue: searchForm.fieldvalue,});},},},
})

2、然后我们点击下一页,或者切到到另一页的时候,再次查询的时候会发现没有数据:

其实是有数据的,然后我们在查询的时候,取得是最后一次的pager页码,比如说3,然后查询的时候,可能只有一条数据,所以就显示不出来了。

3、我们查询之前,一定要将页码重新设置为1,这样就可以了:

如果直接这样赋值,就会提示不可以赋值。

其中的代码片段:

 <VxeGrid ref="tableRef" v-bind="gridOptions" @cell-click="handleCellClick" class="ml-2 mr-2"><template #xzbhSlots="{ row }"><div class="underline cursor-pointer text-blue-400" @click="xzbhClick(row)">{{ row.xzbh }}</div></template><template #toolbar_buttons><div class="flex items-center justify-between ml-2 mr-2 w-[99%]"><Space><VxeSelectv-model:modelValue="searchForm.fieldname"style="width: 150px"placeholder="==默认所有列=="@change="fieldnamelistChange"><vxe-optionv-for="(item, index) in searchForm.fieldnamelist":key="index":value="item.value":label="item.label"/></VxeSelect>...</template>
</VxeGrid>

4、最后我们通过这样处理即可:

function onSearch() {const $grid = tableRef.value;if ($grid) {const proxyInfo = $grid.getProxyInfo();if (proxyInfo) {proxyInfo.pager.currentPage = 1;$grid.clearCurrentRow();$grid.clearFilter();$grid.clearCheckboxRow();$grid.commitProxy('query');}}}

通过上面的代码,就可以了。

http://www.lryc.cn/news/404502.html

相关文章:

  • 电商数据集成之电商商品信息采集系统架构设计||电商API接口
  • Spring Cloud Stream 实现统一消息通信平台
  • uniapp安卓plus原生选择系统文件
  • Go语言 Import导入
  • 一款异次元小清新风格的响应式wordpress个人博客主题
  • 【cocos creator】ts中export的模块管理
  • QT JSON使用实例
  • 浅聊 Three.js 屏幕空间反射SSR-SSRShader
  • Windows图形界面(GUI)-DLG-C/C++ - 月历控件(MonthCalendar)
  • 【Langchain大语言模型开发教程】基于文档问答
  • 大厂面试-基本功
  • RV1103使用rtsp和opencv推流视频到网页端
  • 与Bug较量:Codigger之软件项目体检Software Project HealthCheck来帮忙
  • Git --- Branch Diverged
  • go标准库---net/http服务端
  • Linux文件和目录常用命令
  • 【C++刷题】优选算法——链表
  • Flex和Bison
  • Matlab-FPGA 小数转换为定点二进制小数脚本和转coe文件格式脚本
  • 逆向案例二十三——请求头参数加密,某区块链交易逆向
  • CSS 导航栏:设计、定制与优化
  • JS 如何处理链接被用户点击中键的操作
  • Android 11 使用HAL层的ffmpeg库(1)
  • 友力科技数据中心搬迁方案
  • GitHub敏感信息扫描工具
  • Linux云计算 |【第一阶段】ENGINEER-DAY4
  • C++与VLC制作独属于你的动态壁纸背景
  • 平凯星辰黄东旭出席 2024 全球数字经济大会 · 开放原子开源数据库生态论坛
  • Mac OS 下安装 NVM,1秒教会你
  • 搭建博客系统#Golang