iView的page 组件

最新推荐文章于 2025-06-10 19:01:02 发布

weixin_30439131

最新推荐文章于 2025-06-10 19:01:02 发布

阅读量473

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/panax/p/10974419.html

本文详细解析了Vue中自定义分页组件的实现方法，包括如何通过changeSize事件响应页面变化，展示总页数，以及如何通过postRequest方法获取数据并更新页面显示。同时介绍了分页组件的各种属性如page-size、show-total等的使用场景。

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

//html

<div class="pageNation">
  <Page :total= totalPages  :page-size= pageSize  size="small" @on-change="changeSize" v-model="page" show-total /> 
 // changeSize事件改变值page， 
 // show-total 展示总数   
 // show-elevator 跳到指定某一页。
 // show-sizer 切换每页的数量.
 //:current="2"  当前页，支持 .sync 修饰符
 // simple   简易模式。通过输入页码回车切换，或使用鼠标点击切换页码，或使用键盘的上下键来切换。简洁分页不能使用总数、电梯和切换数量。
</div>

api

// 分页
    changeSize(page){
        let _this = this;
        _this.page = page;        //  通过在data中设置变量也可以拿到当前页，并在全局使用
        _this.postRequest('', {
              pageNum: page,
              pageSize: 32
            }, function(data) {
              _this.totalPages = data.total
              _this.pageSize = data.pageSize
              _this.lists = data.datas
              console.log(_this.lists)
            })
    },