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

news2024/9/20 18:39:32

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>
              <VxeSelect
                v-model:modelValue="searchForm.fieldname"
                style="width: 150px"
                placeholder="==默认所有列=="
                @change="fieldnamelistChange"
              >
                <vxe-option
                  v-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.coloradmin.cn/o/1933499.html

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

相关文章

Python求均值,方差,标准差

参考链接&#xff1a;变异系数&#xff08;Coefficient of Variation,COV&#xff09;和协方差&#xff08;Covariance, Cov&#xff09;-CSDN博客 参考链接&#xff1a;pandas中std和numpy的np.std区别_numpy pandas std-CSDN博客 在计算蛋白质谱数据中的每个蛋白对应的变异…

【Java面向对象】多态

文章目录 1.动态绑定2.对象转换和 instanceof 操作符稍作总结3.Object 类的 equals 方法4.ArrayList 类5.继承体系中的权限问题6.final 1.动态绑定 多态意味着父类型的变量可以引用子类型的对象。 方法可以在沿着继承链的多个类中实现。JVM 决定运行时调用哪个方法。 一个变量…

新手小白攻略:如何用AI工具搭建个人知识库

个人知识库是指个人通过积累和整理&#xff0c;将各种领域的知识、经验和技能进行分类、归纳和存储的系统化工具或平台。 随着信息技术的飞速发展和知识经济的兴起&#xff0c;个人知识库不仅成为个人学习、成长和创新的基石&#xff0c;也是适应快速变化社会、提升竞争力的关…

python--实验 11 模块

目录 知识点 模块基础 模块使用方式 自定义模块示例 模块的有条件执行 Python包结构 定义和导入包 常用第三方库及安装 实例代码 第三方库自动安装脚本 Python标准库介绍 PyInstaller 小结 实验 1.(基础题)制作文本进度条。 2.(基础题) 蒙特卡罗方法计算圆周率…

nginx全局块的user指令

文章目录 1、user指令1.1、进入nginx解压的目录1.2、./configure --help1.3、工作进程默认是nobody 2、user指令的使用步骤:2.1、设置一个用户信息"www"2.2、 创建一个用户2.3、./nginx -s reload2.4、创建/root/html/index.html页面&#xff0c;添加如下内容2.5、修…

住宅IP解析:动态住宅IP和静态住宅IP区别详解

在互联网连接的世界中&#xff0c;IP地址是我们识别和访问网络资源的关键。住宅IP地址&#xff0c;特别是动态住宅IP和静态住宅IP&#xff0c;是两种不同类型的IP分配方式&#xff0c;它们在使用和功能上存在显著差异。 1. IP地址的稳定性 动态住宅IP&#xff1a;这种IP地址是…

昇思25天学习打卡营第14天|munger85

基于MindNLPMusicGen生成自己的个性化音乐 这个所谓的个性化的音乐就是指你输入一段文字它会根据这个文字输出一段音乐这个音乐是贴近于那段文字的所以叫做文生成音乐&#xff0c; 如果网络正常的话就可以直接从下载这个模型。 那么音乐生成的有两种方式呢有两种方式&#xff…

layui 让table里的下拉框不被遮挡

记录&#xff1a;layui 让table里的下拉框不被遮挡 /* 这个是让table里的下拉框不被遮挡 */ .goods_table .layui-select-title,.goods_table .layui-select-title input{line-height: 28px;height: 28px; }.goods_table .layui-table-cell {overflow: visible !important; }.…

[C++初阶]list的模拟实现

一、对于list的源码的部分分析 1.分析构造函数 首先&#xff0c;我们一开始最先看到的就是这个结点的结构体&#xff0c;在这里我们可以注意到这是一个双向链表。有一个前驱指针&#xff0c;一个后继指针。然后在有一个存储数据的空间 其次它的迭代器是一个自定义类型&#x…

【Python游戏】编程开发贪吃蛇游戏(第一期)

本文收录于 《一起学Python趣味编程》专栏&#xff0c;从零基础开始&#xff0c;分享一些Python编程知识&#xff0c;欢迎关注&#xff0c;谢谢&#xff01; 文章目录 一、前言二、贪吃蛇游戏开发简介2.1 贪吃蛇游戏规则2.2 贪吃蛇游戏开发步骤 三、贪吃蛇游戏开发实战四、总结…

13 个最受欢迎的技术写作工具

13 个最受欢迎的技术写作工具 在我的职业生涯中&#xff0c;我作为技术作家工作了大约 10 年&#xff0c;根据需要使用了各种文档工具。作为技术作家&#xff0c;主要工作职责是提供正确的内容。 使用正确的技术写作工具可以使技术作家的生活变得轻松。有多种工具可用于不同的…

【Vue】Vue3 安装 Tailwind CSS 入门

初始化 Vue 3 项目 npm install -g vue/cli vue create my-project安装 Tailwind CSS 进入你的项目目录&#xff0c;然后安装 Tailwind CSS 和其依赖项&#xff1a; npm install -D tailwindcss postcss autoprefixer配置 PostCSS Tailwind CSS 需要通过 PostCSS 进行处理。…

Linux发行版CentOS 8 利用Docker安装应用

目录 一、什么是Docker&#xff1f; 主要功能&#xff1a; 二、安装Docker 1.安装yum配置工具 2.配置docker的yum源 3.安装 4.测试 5.启动&#xff0c;关闭&#xff0c;开机自启动 三、卸载Docker 1.停止服务 2.卸载 3.删除文件 四、Docker配置镜像源 1.在etc下创建docker…

【大模型时代的PDF解析工具】

去年&#xff08;2023年&#xff09;是大模型爆发元年。但是大模型具有两个缺点&#xff1a;缺失私有领域知识和幻觉。缺失私有领域知识是指大模型训练时并没有企业私有数据/知识&#xff0c;所以无法正确回答相关问题。并且在这种情况下&#xff0c;大模型会一本正经地胡说八道…

JavaEE--JavaWeb服务器的安装配置(Tomcat服务器安装配置)

前言: 本文介绍了 Java Web 服务器 Tomcat 的安装配置&#xff0c;并详细说明了如何在 IntelliJ IDEA 中配置服务器&#xff0c;创建 JavaEE 项目&#xff0c;并发布文章。文章首先解释了前端程序如何访问后端程序以及 Web 服务器的概念&#xff0c;然后详细介绍了安装 Tomcat…

VirtualBox虚拟机与主机互传文件的方法

建立共享文件夹 1.点击设置&#xff0c;点击共享文件夹&#xff0c;添加共享文件夹路径&#xff0c;保存 2.启动虚拟机&#xff0c;点击设备&#xff0c;点击安装增强功能&#xff0c;界面会出现一个光碟图标&#xff0c;点击光碟图标 3.打开光碟图标&#xff0c;出现一个目…

Vue3渐变文字(GradientText)

效果如下图&#xff1a;在线预览 APIs GradientText 参数说明类型默认值必传gradient文字渐变色参数string | Gradientundefinedfalsesize文字大小&#xff0c;不指定单位时&#xff0c;默认单位 pxnumber | string14falsetype渐变文字的类型‘primary’ | ‘info’ | ‘succ…

【大模型】FAISS向量数据库记录:从基础搭建到实战操作

文章目录 文章简介Embedding模型BGE-M3 模型亮点 FAISS是什么FAISS实战安装faiss加载Embedding模型创建FAISS数据库搜索FAISS数据删除FAISS数据保存、加载FAISS索引 总结 本人数据分析领域的从业者&#xff0c;拥有专业背景和能力&#xff0c;可以为您的数据采集、数据挖掘和数…

Java语言程序设计基础篇_编程练习题**14.29(游戏:豆机)

第十四章第二十九题 **14.29 (游戏&#xff1a;豆机) 请写一个程序&#xff0c;显示编程练习题 7.21 中介绍的豆机&#xff0c;如图 14-52c 所示 代码展示 package chapter_14;import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layou…

易保全参与起草的两项区块链全国团体标准正式发布

在数字化转型浪潮席卷全球的今天&#xff0c;区块链技术以其去中心化、透明性、不可篡改等独特优势&#xff0c;正逐步成为重塑各行各业信任机制与业务流程的关键力量。 近日&#xff0c;中国通信工业协会正式发布了《区块链服务 基于区块链的去中心化标识符技术要求》与《区块…