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://xiahunao.cn/news/3248463.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【常见开源库的二次开发】基于openssl的加密与解密——单向散列函数(四)

目录&#xff1a; 目录&#xff1a; 一、什么是单项散列函数&#xff1f; 1.1 如何验证文件是否被修改过 1.2 单项散列函数&#xff1a; 二、单向hash抗碰撞 2.1 弱抗碰撞&#xff08;Weak Collision Resistance&#xff09; 2.2 强抗碰撞&#xff08;Strong Collision Resista…

[GXYCTF2019]Ping Ping Ping1

打开靶机 结合题目名称&#xff0c;考虑是命令注入&#xff0c;试试ls 结果应该就在flag.php。尝试构造命令注入载荷。 cat flag.php 可以看到过滤了空格,用 $IFS$1替换空格 还过滤了flag&#xff0c;我们用字符拼接的方式看能否绕过,ag;cat$IFS$1fla$a.php。注意这里用分号间隔…

【光伏发电功率预测】方法综述学习笔记2《光伏发电功率超短期预测方法综述》

本文参考《光伏发电功率超短期预测方法综述》&#xff1a;https://d.wanfangdata.com.cn/periodical/ChlQZXJpb2RpY2FsQ0hJTmV3UzIwMjQwNzA0Eg5nZHlqczIwMjMwNzAyNBoIeHp4NW40YmU%3D 文章目录 摘要&#xff1a;引言1. 光伏发电功率的影响因素分析1.1传递过程中的影响因素1.1.1…

DDei在线设计器-数据格式说明

数据格式说明 DDei的所有设计数据都以文件为单位保存在一个JSON对象中。JSON对象包含了全量的页签、舞台、图层、控件的位置以及属性信息。开发人员可以存储这个JSON到服务端数据库中&#xff0c;从而轻易的实现保存功能&#xff1b;也解析这个JSON&#xff0c;将其转换成自己业…

对红酒品质进行数据分析(python)

http://t.csdnimg.cn/UWg2S 数据来源于这篇博客&#xff0c;直接下载好csv文件。 这篇内容均在VScode的jupyter notebook上完成&#xff0c;操作可以看我的另一篇博客&#xff1a;http://t.csdnimg.cn/69sDJ 一、准备工作 1. 导入数据库 #功能是可以内嵌绘图&#xff0c;并…

用了6年git,不知道cherry-pick是啥意思

背景 可能是测试开发角色原因&#xff0c;平时很少有代码冲突或多人协同的编码场景。今天有个协同项目&#xff0c;需要提交自己的代码到其它业务的代码库中&#xff0c;这个代码库是分支开发分支上线模式&#xff0c;同时会有多个同事提交代码&#xff0c;然后模块负责的同学…

常用优秀内网穿透工具(实测详细版)

文章目录 1、前言2、安装Nginx3、配置Nginx4、启动Nginx服务4.1、配置登录页面 5、内网穿透5.1、cpolar5.1.1、cpolar软件安装5.1.2、cpolar穿透 5.2、Ngrok5.2.1、Ngrok安装5.2.2、随机域名5.2.3、固定域名5.2.4、前后端服务端口 5.3、NatApp5.4、Frp5.4.1、下载Frp5.4.2、暴露…

【数学建模】——【线性规划】及其在资源优化中的应用

目录 线性规划问题的两类主要应用&#xff1a; 线性规划的数学模型的三要素&#xff1a; 线性规划的一般步骤&#xff1a; 例1&#xff1a; 人数选择 例2 &#xff1a;任务分配问题 例3: 饮食问题 线性规划模型 线性规划的模型一般可表示为 线性规划的模型标准型&…

vue2.0结合使用 el-scrollbar 和 v-for实现一个横向滚动的元素列表,并且能够自动滚动到指定元素(开箱即用)

效果图&#xff1a; 代码&#xff1a; <div class"gas-mode-item-body"><el-scrollbar style"width: 300px;height: 100%;" wrap-style"overflow-y:hidden" ref"scrollbarRef"><div style"display: flex&quo…

Python Linux环境(Centos8)安装minicoda3+jupyterlab

文章目录 安装miniconda安装python环境启动 最近服务器检查&#xff0c;我下面的服务器有漏洞&#xff0c;不得已重装了&#xff0c;正好记录下怎么从零到python写代码。 安装miniconda miniconda是anconda的精简版&#xff0c;就是管理python环境的得力助手。 # 创建一个名…

7.18 学习笔记 解决分页越界问题 及分页查询

1.解决分页越界 1.1出现的问题 于是我索性把分页去掉想是不是就可以了&#xff0c;结果发现还不行 1.2解决方法 就当我找了一两个小时抓耳挠腮时&#xff0c;万幸在csdn上找到了相关的帖子&#xff0c;在此感谢一下那位大佬。 原因是我的实体类中没有构造方法&#xff0c;那…

软考系规百天备考攻略:基础阶段的三轮强化

早在今年4-5月份的时候&#xff0c;我就曾经讲过系统规划与管理师的备考建议&#xff0c;也就是先从教程学起&#xff0c;先读教程&#xff0c;而且我也说过&#xff0c;不要迷信任何培训班或者培训视频&#xff0c;任何培训班或者培训视频都不能取代你认真读至少一遍教程&…

BIOMOD2 物种分布模拟教程

原文链接&#xff1a;BIOMOD2 物种分布模拟教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247609373&idx5&sn492e7597314a5f9e358c35e4780b275f&chksmfa826dfacdf5e4ecf8ac06bdeba5469b31650bdbefbc8fb88b79c0f332714c453a4cc058d29f&token155…

Calibration相机内参数标定

1.环境依赖 本算法采用张正友相机标定法进行实现&#xff0c;内部对其进行了封装。 环境依赖为 ubuntu20.04 opencv4.2.0 yaml-cpp yaml-cpp安装方式&#xff1a; &#xff08;1&#xff09;git clone https://github.com/jbeder/yaml-cpp.git #将yaml-cpp下载至本地 &a…

15- 微分方程

对三角函数不敏感

模块化沙箱:解锁数据防泄密的终极密码

在这个数字化时代&#xff0c;数据已经成为企业最宝贵的资产之一。然而&#xff0c;数据泄露的威胁如同暗夜中的幽灵&#xff0c;随时可能侵袭企业的信息安全防线。面对日益复杂的内外部风险&#xff0c;企业亟需一种既高效又灵活的安全解决方案&#xff0c;来保护其核心数据不…

专业PDF编辑工具:Acrobat Pro DC 2024.002.20933绿色版,提升你的工作效率!

软件介绍 Adobe Acrobat Pro DC 2024绿色便携版是一款功能强大的PDF编辑和转换软件&#xff0c;由Adobe公司推出。它是Acrobat XI系列的后续产品&#xff0c;提供了全新的用户界面和增强功能。用户可以借助这款软件将纸质文件转换为可编辑的电子文件&#xff0c;便于传输、签署…

透视矫正插值

https://www.cnblogs.com/straywriter/articles/15889273.html https://www.comp.nus.edu.sg/~lowkl/publications/lowk_persp_interp_techrep.pdf https://8.136.115.103/perspective-correct-interpolation%E9%80%8F%E8%A7%86%E6%A0%A1%E6%AD%A3%E6%8F%92%E5%80%BC/ 透视矫正…

Postfix+Dovecot+Roundcube开源邮件系统搭建系列4:Dovecot安装配置

1. Dovecot安装 安装Dovecot&#xff1a; yum -y install dovecot dovecot-mysql 启动服务并设置开机自启动&#xff1a; systemctl start dovecot systemctl enable dovecot 2. Dovecot配置 Dovecot配置文件目录&#xff1a;/etc/dovecot&#xff0c;在该目录中dovecot.…

【内网穿透】如何本地搭建Whisper语音识别模型并配置公网地址

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…