el-pagination分页

最新推荐文章于 2024-09-30 16:08:58 发布

小付-小付

最新推荐文章于 2024-09-30 16:08:58 发布

阅读量388

点赞数

文章标签： elementui vue.js javascript 前端 html

本文链接：https://blog.csdn.net/weixin_58431406/article/details/125337554

版权

本文详细介绍了如何在Vue应用中使用Element UI的分页组件，讲解了size-change和current-change事件的用法，并展示了如何根据用户操作重新加载数据。着重于前端开发中常见的分页功能实现和事件处理技巧。

摘要由CSDN通过智能技术生成

<el-pagination style="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>

size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

data() {
    return {
      pageSize: 10,
      pageIndex: 1,
      totalPage: 0
    };
  },

   // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },

 getDataList() {
      api
        .Showlist({
          // 分页
          page: {
            current: this.pageIndex,
            size: this.pageSize
          },
          ...this.dataForm,
        })
        .then(data => {
          this.totalPage = data.data.total;
        })
        .catch(data => {
          this.totalPage = 0;
        });
    },