element ui 分页功能的使用

最新推荐文章于 2023-02-04 21:59:13 发布

满楼、

最新推荐文章于 2023-02-04 21:59:13 发布

阅读量161

点赞数

分类专栏： elementui 前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_42367288/article/details/118027115

版权

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

elementui

8 篇文章

订阅专栏

本文介绍 Element UI 中分页组件的使用方法，包括如何设置每页显示条数、当前页码以及如何通过分页组件触发的数据加载。通过具体代码示例展示了如何实现这些功能。

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

      <el-pagination
          style="margin-left: 30px;margin-top: 10px"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

//data
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
//methed
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList() //请求数据
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },