vue封装分页组件

1，新建一个组件pagination.vue

<template>
<div class="pagination">
  <el-pagination
    small
    class="text-center"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page.page"
    :page-sizes="pageSizes"
    :page-size="page.limit"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    ref="pagination"
  >
  </el-pagination>
</div>
</template>

<script>
export default {
props: {
  total: {
    type: Number,
  }, // 总条数
},
data() {
  return {
    pageSizes: [10, 20, 50, 100],
    page: {
      page: 1,
      limit: 10,
    },
  };
},
methods: {
  // 每页条数变更
  handleSizeChange(val) {
    this.page.limit = val;
    this.page.page = 1;
    this.$emit("pageChange", this.page);
  },
  // 当前页码变更
  handleCurrentChange(val) {
    this.page.page = val;
   //  this.$refs.pagination.internalCurrentPage = 1;
    this.$emit("pageChange", this.page);
  },
},
watch: {
  total(newdata, olddata) {
    if (newdata != olddata) {
      this.$refs.pagination.internalCurrentPage = 1;
       this.page.limit = 10;
    }
  },
},
};
</script>
<style>
.pagination {
margin: 20px 0;
}
</style>

2,组件引用

  <!-- 分页 -->
        <div class="block">
          <pagination :total="total" @pageChange="pageChange"></pagination>
        </div>
<script>
  import pagination from '../../components/Module/paginate.vue'
  export default {
    components: { pagination },
    data() {
      return {
        //分页
        PageIndex: 1,
        Pagesize: 10,    //    每页的数据
        total: 0,
        //搜索
        formselect: {
          Project: "",
        },
      }
    },
    created() {
      this.GetProjectList()
    },
    mounted() {

    },
    methods: {
   
      // 页码切换
      pageChange(item) {
        this.PageIndex = item.page;
        this.Pagesize = item.limit;
        this.GetProjectList();
      },
 //查询
      OPDSearch() {
         this.total = 1;//为了触发监听事件从而把插件页码改变为从第一页开始
        this.PageIndex=1//查询时回到第一页
        this.GetProjectList()
      },
      //请求table数据
      GetProjectList() {
        var that = this
        this.$axios.get('' + this.$baseService.PhysicianTrainingTable, {
          // params: this.$qs.stringify(this.formselect)
          params: {
            Project: this.formselect.Project,
            PageIndex: this.PageIndex,
            Pagesize: this.Pagesize
          }
        })
          .then(function (res) {
            that.total = res.data.totalCount
            that.tableData = res.data.data;
          })
          .catch(function (error) {
          });
      },
     
    }

  }
</script>