springCloud+Vue改造品优购第二章--------品牌管理分页功能前端完成

weiqiang2

于 2018-08-16 06:32:21 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

分类专栏：品优购改造系列

本文链接：https://blog.youkuaiyun.com/weiqiang2/article/details/81734704

品优购改造系列专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在Web应用中使用分页组件的方法，详细解释了如何定义和触发分页事件，以及如何通过这些事件获取和更新表格数据。通过具体的代码示例，展示了如何设置页面大小、当前页数，并在分页变化时调用后端API来更新显示的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入分页组件

                 <div class="toolspan">
                    <Page class="toolspan-pager" show-total show-sizer show-elevator
                          :page-size="tableData.size"
                          :current="tableData.current"
                          :total="tableData.total"
                          @on-change="setInitPage"
                          @on-page-size-change="pageSizeChange" ref="listPager"></Page>
                </div>

定义分页的事件

            setInitPage(pageIndex){
                this.listQueryParams.current=pageIndex;
                this.getListData();
            },
            pageSizeChange(pageSize){
                this.listQueryParams.size=pageSize;
                this.getListData();
            },

获取表格数据

            getListData(){
                this.list_loadding = true;
                this.$store.dispatch("manage_brandPage",this.listQueryParams).then(res =>{
                    this.tableData = res.data;
                    console.log(res)
                }).catch(err =>{
                    this.$Message.error(err)
                })
                this.list_loadding = false;
            },