封装分页器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 = await this.$API.trademark.reqTradeMark(
              currentPage,
              limitPage
          );
          if (pagelist.code == 200) {
            this.totalPage = pagelist.data.total;
            this.trademarklist = pagelist.data.records;
          }
        },
        // 修改每页显示的条数
        handleSizeChange(val) {
          this.limitPage = val;
          this.getPagelist();
        },
        // 改变当前页【可省的回调函数】
        handleCurrentChange(val) {
          this.currentPage = val;
          this.getPagelist();
        },
      },
    };
</script>

如果el-table中有序号这一项，且序号要跟随数目变化的话，要添加一个属性： <el-table-column type="index" label="序号" width="50" :index="changeindex" >

changeindex(index) {
      return index + 1 + this.limitPage * (this.currentPage - 1);
    },

对应分页器样式：

省一个回调函数的写法：

// 函数调用时直接调用获取页码方法
@current-change="getPagelist"
// 获取页码方法
// 点击页码时，传递页码数，其余情况，使用默认值：1
async getPagelist(pages = 1) {
    // 传递参数：当前页码&&每页显示的条数
    this.currentPage = pages;
    const { currentPage, limitPage } = this;
    let pagelist = await this.$API.trademark.reqTradeMark(
          currentPage,
          limitPage
    );
    if (pagelist.code == 200) {
          this.totalPage = pagelist.data.total;
          this.trademarklist = pagelist.data.records;
    }
},

2、参数：偏移量&&每页显示的条数

获取count总数之后，再获取列表数据

<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="limit"
    layout="total, sizes, prev, pager, next, jumper"
    :total="count"
>
</el-pagination>
      
<script>
     export default {
          data() {
            return {   
            list:[],
              count: 0,
              currentPage: 1,
              offset: 0,
              limit: 10,
            };
          },
          mounted() {
            this.getCount();
            this.getData();
          },
          methods: {
            getCount() {
              axios({
                url: "https://elm.cangdu.org/shopping/restaurants/count",
                method: "get",
              }).then((response) => {
                //获取count总数
                this.count = response.data.count;
              });
            },
            handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
              this.limit = val;
              this.offset = (this.currentPage - 1) * this.limit;
              this.getData();
            },
            handleCurrentChange(val) {
              console.log(`当前页: ${val}`);
              this.currentPage = val;
              this.offset = (val - 1) * this.limit;
              this.getData();
            },
            async getData() {
              const param = {
                latitude: "31.22967",
                longitude: "121.4762",
                offset: this.offset,
                limit: this.limit,
              };
              const result = await getShoplist(param);
              if (result.status == 200) {
                  this.list = result.data;
              };
           }
     },
};
</script>

补充知识点：

1.将分页器居中时，在el-pagination中添加属性style="text-align: center"

2.调整分页器的布局时，调整el-pagination的layout属性值的顺序即可，若想让某一部分在最右边，则使用 -> 符号即可
举例：layout="prev, pager, next, jumper,->,sizes,total"
图：