Ant?Design?Vue?table组件怎么自定义分页器

这篇文章主要介绍了AntDesignVuetable组件怎么自定义分页器的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇AntDesignVuetable组件怎么自定义分页器文章都会有所收获，下面我们一起来看看吧。

Ant Design Vue table组件自定义分页器

由 Ant Design of Vue 提供的Table表格组件自身是带有pagination分页功能的，用于获取到后台返回的全部数据时很适用。但是项目需求需要用到分页查询以及条数查询时，就需要我们对代码做出改变

1.设置pagination属性为false,取消table组件自带的分页效果

<a-table:pagination="false"></a-table>

2.使用分页组件,选用合适的属性

<a-paginationv-model="current"show-size-changer:page-size.sync="pageSize":total="total":show-total="total=>`总数${total}条`"/>

data(){return{total:0,pageSize:10,current:1},watch:{//监听条数的改变pageSize(val){console.log('pageSize',val);this.pageSize=valthis.current=1this.getRtSignByPage()},//监听页数的改变current(val){console.log('current',val);this.current=valthis.getRtSignByPage()},},mounted(){this.getRtSignByPage()},methods:{//按条件分页查询asyncgetRtSignByPage(){let{data}=awaitgetMenuPages({current:this.current,size:this.pageSize})this.data=data.data.recordsthis.total=data.data.total}}

使用Ant Design Vue的Table组件，解决点击任意内容详情，点击返回分页器页数默认回到第一页

问题描述

使用Ant Design Vue的 Table 组件时，点击底部分页器切换页面，表格信息会重新加载，但是页面路由还是相同的，这就导致切换页面之后，点击某一元素的详情页面之后，点击返回默认回到表格的第一页，就比如你点击 页数为 3 的一个元素切换到它的详情页，点击返回，表格又回到了页数 1，这样的操作体验十分不友好

解决方法

巧妙运用pagination 的 defaultCurrent（默认页数属性），配合使用 onChange方法，使用 sessionStorage.setItem() 和 sessionStorage.getItem() 来存储和取出当前页数 ，

表格代码

这里的代码只是测试用例，用于演示

<a-table:data-source="data":columns="columns":pagination="pagination"><templateslot="address"><div><span><a@click="ClickDetail">详情</a></span></div></template></a-table>

自定义的pagination

data(){return{data,columns,currentPage:Number(sessionStorage.getItem('currentPage'))||1,,pagination:{pageSize:5,//默认每页显示数量defaultCurrent:Number(sessionStorage.getItem('currentPage'))||1,//默认当前页数showSizeChanger:true,//显示可改变每页数量pageSizeOptions:['5','10','20','50'],//每页数量选项showTotal:total=>`Total${total}items`,//显示总数showSizeChange:(current,pageSize)=>this.pageSize=pageSize,//改变每页数量时更新显示//改变页数时时触发函数onChange:(current)=>{this.currentPage=current;}}}},

methods中的函数

点击进入详情函数

//点击详情事件ClickDetail(){sessionStorage.setItem('currentPage',this.currentPage)//下面是自己的具体的页面逻辑，即跳转路由的操作this.$route.xxxxxx}

可以看到当点击详情后，就把当前的 页面值 currentPage 存入了缓存中，可以仔细看上面自定义pagination 的一些配置，它从缓存中取出 先前的页面值currentPage ，并把它当做默认页面加载 ，那么现在可以看到这个问题就迎刃而解了

关于“AntDesignVuetable组件怎么自定义分页器”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“AntDesignVuetable组件怎么自定义分页器”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注主机评测网行业资讯频道。

上一篇：php无法正确地解析JSON数据如何解决

下一篇：Python deepdiff库怎么使用

---