vue2来封装elementui的分页组件

1.创建一个子组件，Pagination.vue

<template>
  <el-pagination
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50,totalItems]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalItems"
  />
</template>
​
<script>
export default {
    //通过props来接受父组件的值
  props: {
       //当前页码
    currentPage: {
      type: Number,
      required: true,
    },
       //每页显示条数
    pageSize: {
      type: Number,
      required: true,
    },
       //总条数
    totalItems: {
      type: Number,
      required: true,
    },
  },
  methods: {
    handleCurrentChange(val) {
       /* $emit来触发自定义事件`current-change`，并传递`val`为参数，这时候就会调用父组件中的            `handleCurrentChange` 方法，因为父组件中有一个`@current-change="handleCurrentChange`方法 */
      this.$emit('current-change', val);
    },
    handleSizeChange(val) {
        //$emit来触发自定义事件`size-change`，并传递`val`为参数,这时候也会调用父组件中的方法
      this.$emit('size-change', val);
    },
  },
};
</script>

2.在父组件中调用

1. 首先进行引入子组件

import Pagination from '@/components/Pagination'
进行注册

2. 进行注册,并定义分页的默认参数

export default { 
components: {
    Pagination,
​
  },
  data(){
    return{
      currentPage: 1, // 当前页数
      pageSize: 10,  // 每页显示的行数
      totalItems: 0, //总条数
        }
  }
​
}

3. 页面使用

 <Pagination :current-page="currentPage" :page-size="pageSize" :total-items="totalItems"
              @current-change="handleCurrentChange" @size-change="handleSizeChange" />
     
     /* @current-change="handleCurrentChange" 就是子组件通过$emit来触发，
        @size-change="handleSizeChange"也是一样，
        :current-page   :page-size   :total-items就是传给子组件的props
     */

4. 在脚本中写方法

export default { 
components: {
    Pagination,
​
  },
  data(){
    return{
      currentPage: 1, // 当前页数
      pageSize: 10,  // 每页显示的行数
      totalItems: 0, //总条数
        }
  },
methods:{
 handleCurrentChange(val) {
      this.currentPage = val;
      this.handleTable()
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.handleTable();
​
    },
}
}

最后

在子组件中的totalItems其实可以不用传递，当前传递是因为分页显示条数的时候就可以选择总条数这个条件，这样就可以在一个页面显示全部信息，而不是只能通过定义的:page-sizes="[10, 20, 50,totalItems]"来显示10-50条的信息。