element 封装公共分页（el-pagination）

效果：

在表格中常见每个表格都要用到分页，为了提高代码的复用性，封装共同分页。

1、公共pagina页面

<template>
  <el-pagination layout="total, sizes, prev, pager, next, jumper" background :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" :total="total"
    @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="currpage">

  </el-pagination>
</template>

<script>
  export default {
    data(){
      return {
        
      }
    },
    props:["total","currpage","pagesize"], //传入的值
    methods:{
      handleSizeChange(val){           //子传父或者父传子
        this.$emit("sizechange",val)
      },
      handlePageChange(val){
        this.$emit("pagechange",val)
      }
    }
  }
</script>

<style>
</style>

2、应用的页面

//使用
<Pagina :currpage="page" :total="total" :pagesize="size" @sizechange="handleSizeChange" @pagechange="handlePageChange"></Pagina>


//引入
import Pagina from '@/components/common/pagina'
//注册
components: {
    Pagina
},


//数据
export default {
  data() {
    return {
        page: 1,
        size: 10,
        total: 0,
    }
}


//方法
methods: {
  // 分页
  handleSizeChange(val) {
    //this.page = 1;  切换一页几条时页数返回第一页
    this.size = val;
    this.getInfoChange();
  },
  handlePageChange(val) {
    this.page = 1;  切换一页几条时页数在当前页
    this.page = val;
    this.getInfoChange();
  },
  // 获取个人基础信息修改记录
  getInfoChange() {
     this.$axios({
        url: "XXX",
        method: "post",
        data: {
            page:this.page,
            size:this.size
        },
      }).then((res) => {
        this.InfoData = res.data.data.data;
        this.total = res.data.data.totalRecords;
      });
    },
}