vue---element el-pagination封装分页组件

需求描述：将分页组件封装为公共组件，在需要引用分页的页码引入即可。

解决思路：

假设分页组件为【Page.vue】（子组件），两个页面为父组件，分别为【PageOne.vue】和【PageTwo.vue】

（1）PageOne.vue（父组件）和PageTwo.vue（父组件）需要向Page.vue（子组件）传递总条数【total】，通过【props】属性传值实现

•       父组件：【<page :total="page_total"></page>】
•       子组件【props: ["total"]】

（2）子组件需要向父组件传递每页条数【pageSize】和当前页【currentPage】，使用this.$emit("function",param);   //其中function为父组件定义函数，param为需要传递的参数。 

•       父组件：【<page :total="page_total" @pageChange="pageChange"></page>】
•        子组件：【this.$emit("pageChange", this.page);】

代码如下：

【Page.vue】

<template>
  <div class="page">
    <el-pagination
      small
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: ["total"],
  data() {
    return {
      // 页码参数
      page: {
        currentPage: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      console.log(`每页 ${this.page.pageSize} 条`);
      this.$emit("pageChange", this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      console.log(`当前页: ${this.page.currentPage}`);
      this.$emit("pageChange", this.page);
    }
  }
};
</script>

<style lang="less">
</style>

【PageOne.vue】

<template>
  <div class="pageone">
    <page :total="page_total" @pageChange="pageChange"></page>
  </div>
</template>
<script>
import Page from "../components/Page";
export default {
  data() {
    return {
      page_total: 100,
      page_index: 1, //页码
      page_size: 20 //每页展示条数
    };
  },
  components: {
    page: Page
  },
  methods: {
    pageChange(item) {
      console.log("pageone:", item);
      this.page_index = item.currentPage;
      this.page_size = item.pageSize;
      console.log(`每页展示${this.page_size}条，当前为${this.page_index}页`);
      //   this.query(); //页面改变后通过query()方法向后台请求数据渲染页面
    }
  }
};
</script>
<style lang="less">
</style>

【PageTwo.vue】同【PageOne.vue】