Ant Design Vue 如何分页（后台传入）

我们在使用分页使，直接用表格()的自定义:pagination属性最方便；如下图所示：

       <a-tableref="table"style="margin-bottom: 24px"row-key="key":columns="goodsColumns":data-source="loadGoodsData":pagination="paginationOpt"bordered></a-table>

基于VUE，我们必须在data中定义paginationOpt对象，代码片段如下：

// 分页paginationOpt: {defaultCurrent: 1, // 默认当前页数defaultPageSize: 5, // 默认当前页显示数据的大小total: 0, // 总数，必须先有showSizeChanger: true,showQuickJumper: true,pageSizeOptions: ["5", "10", "15", "20"],showTotal: (total) => `共 ${total} 条`, // 显示总数onShowSizeChange: (current, pageSize) => {this.paginationOpt.defaultCurrent = 1;this.paginationOpt.defaultPageSize = pageSize;this.searchCameraFrom(); //显示列表的接口名称},// 改变每页数量时更新显示onChange: (current, size) => {this.paginationOpt.defaultCurrent = current;this.paginationOpt.defaultPageSize = size;this.searchCameraFrom();},},

调用接口时，❤一定要更新total值！！！！！❤并在发送请求前结构当前页和pagesize的值，否则一直时默认值1和5（我这边初始时1和5，可自己更改）

    // 查询searchCameraFrom() {console.log(this.cameraParams);const { defaultCurrent, defaultPageSize } = this.paginationOpt;this.$api.Camera.getCameraList({currPage: defaultCurrent,pageSize: defaultPageSize,info: this.cameraParams,}).then((res) => {if (res.code != "200") {return Promise.reject;}console.log(res);this.cameraList = res.data;this.paginationOpt.total = res.total;}).catch(() => {});},

Ant Design Vue 如何分页（后台传入）相关推荐

ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询实现参数转换层最终对接效果在上一篇博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...
ant design vue table分页
ant design vue table分页设置 1.设置pagination <a-table :columns="columns" :dataSource="d ...
Vue + Ant Design Vue 的分页pagination
table 的分页属性pagination 如上图,是用Ant Design创建表格时的分页,下面是我在做项目结合后台给的接口写的代码: <a-table:pagination="p ...
ant design vue table分页 onShowSizeChange 后的 pageNo 问题
onSizeChange 后当前页问题首先,大致描述一下出现这个问题的情形: data(){return {pagination: {pageNo: 1,pageSize: 5,total:0,sh ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
ant design Vue 纯前端实现分页
ant design Vue 纯前端实现分页功能 (有选择的话最好让后端分页,前端分页可能会有问题,为了性能,尽量不要前端分页) 自己想的一个简单方法: 通过页码改变事件,每页数据个数改变事件,获取改 ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue）
1.Element ui 文档已经更新至Vue3,可以放心使用,在使用Element ui的时候注意在使用弹性布局的时候,Element ui中的Table 表格会出现缩放无法自适应问题. 安装 $ ...

Ant Design Vue 如何分页（后台传入）

Ant Design Vue 如何分页（后台传入）相关推荐

最新文章

热门文章