ant-design-vue?Table?pagination分页怎么实现

这篇文章主要讲解了“ant-design-vueTablepagination分页怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“ant-design-vueTablepagination分页怎么实现”吧！

ant-design-vue Table pagination分页实现

ant-design-vue Table自带分页的问题

表格单独使用时，自带简单分页，只包含 上一页, 页面码, 下一页,例如：

我们的实现

但如果想要与后端配合着写，则需要传入pagination参数来自定义，

看代码：

分页变动出发handleTableChange事件：

<a-table:columns="columns":data-source="wmsWarehouseList":pagination="pagination"@change="handleTableChange":row-selection="{selectedRowKeys:selectedRowKeys,onChange:onSelectChange}">

data(){return{//分页参数pagination:{//size:'large',current:1,pageSize:10,total:0,pageSizeOptions:['10','20','30'],//可选的页面显示条数showTotal:(total,range)=>{returnrange[0]+'-'+range[1]+'共'+total+'条'},//展示每页第几条至第几条和总数hideOnSinglePage:false,//只有一页时是否隐藏分页器showQuickJumper:true,//是否可以快速跳转至某页showSizeChanger:true//是否可以改变pageSize},}}methods:{handleTableChange(e){console.log(e)this.pagination=ethis.loading=trueconstpageNum=e.current-1constpageSize=e.pageSizeconstquery={...this.queryParams,}constpageReq={page:pageNum,size:pageSize}listWmsWarehouse(query,pageReq).then((response)=>{})},

onChange与onShowSizeChange 比较

• onChange：页码改变的回调，参数是改变后的页码及每页条数

• onShowSizeChange ：只有pageSize 变化才会回调

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

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

<a-tableref="table"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"){returnPromise.reject;}console.log(res);this.cameraList=res.data;this.paginationOpt.total=res.total;}).catch(()=>{});},

感谢各位的阅读，以上就是“ant-design-vueTablepagination分页怎么实现”的内容了，经过本文的学习后，相信大家对ant-design-vueTablepagination分页怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是主机评测网，小编将为大家推送更多相关知识点的文章，欢迎关注！

上一篇：怎么使用PHP进行数组元素的查找

下一篇：SpringBoot怎么使用AOP+Redis防止表单重复提交

---