封装分页器el-pagination

小尹同学y_y

已于 2022-11-14 10:20:23 修改

阅读量1.4k

点赞数

文章标签：前端 elementui

于 2022-08-11 11:13:55 首次发布

本文链接：https://blog.csdn.net/weixin_52862941/article/details/126281451

版权

这篇博客主要介绍如何根据不同的传参方式封装el-pagination。内容包括：1) 使用当前页码和每页显示条数的情况，以及如何在el-table中处理序号问题；2) 使用偏移量和每页显示条数的情况，以及获取数据的方法。同时，还分享了分页器居中和调整布局的技巧。

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

封装分页器el-pagination，主要是因为传参不同，目前遇见过两种情况：

1、参数：当前页码&&每页显示的条数

直接通过分页器获取内容数据

<!-- 封装element-ui分页器 -->
<el-pagination
      :current-page="currentPage"
      :total="totalPage"
      :page-size="limitPage"
      :page-sizes="[3, 5, 10]"
      layout="sizes, prev, pager, next,total,jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
>
</el-pagination>
    
<!-- js部分的代码 -->
<script>
    export default {
      data() {
        return {
          currentPage: 1,
          totalPage: 30,
          limitPage: 5,
        };
      },
      mounted() {
      //获取页码
      this.getPagelist();
      },
      methods: {
        async getPagelist() {
          // 传递参数：当前页码&&每页显示的条数
          const { currentPage, limitPage } = this;
          let pagelist