素材巴巴 > 程序开发 >

Vue - Ant Design Vue表格组件(Table)分页器(Pagination)带搜索条件调用接口进行分页查询

程序开发 2023-09-03 12:12:11

效果图

如果您项目比较紧急,请直接滑到 最底部 克隆仓库,这是整篇文章配置完毕后的结果。

在这里插入图片描述

前言

如下图所示,分页查询不仅是纯 page / limit 参数进行分页,还需要携带上搜索条件(顶部红框位置),

用户每次设置条件搜索完毕后,当再次分页时,请求会携带这些条件给出数据。
在这里插入图片描述

解决方案

注意:复制运行的话,您项目必须带有 VueAnt design vue 环境,否则会报错。

您可以观察以下代码,也可以直接点击全部复制进行粘贴,结果与最上方效果图一样。