vue2+element-ui封装分页

封装组件

<template>
<el-pagination
  class="pagination" 
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="page"
  :page-sizes="sizes"
  :page-size="limit"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>
</template>

<script>
export default {
  props: {
    // 第几页
    page: {
      type: Number,
      default: ()=> 1
    },
    // 一页多少条数据
    limit: {
      type: Number,
      default: ()=> 10
    },
    // 每页显示多少条
    sizes: {
      type: Array,
      default: ()=> [10,20,30,40]
    },
    // 总数据量
    total: {
      type: Number,
      default: ()=> 0
    },
  },
  data() {
    return {
      params: {
        page: 1,
        limit: 10
      },
    }
  },
  computed: {
    // 可以切换每页多少条数据
    // sizes: {
    //   get() {
    //     this.params.limit = this.limit;
    //     return [this.limit,this.limit * 2,this.limit * 3,this.limit * 4];
    //   },
    //   set() {
    //     // 
    //   }
    // }
  },
  mounted() {
    
  },
  methods: {
    handleSizeChange(limit) {
      console.log(`每页 ${limit} 条`);
      this.params.limit = limit;

      this.onChange();
    },
    handleCurrentChange(page) {
      console.log(`当前页: ${page}`);
      this.params.page = page;

      this.onChange();
    },
    onChange() {
      this.$emit('change',this.params)
    },
  }
}
</script>

<style lang="less" scoped>
.el-pagination {
  text-align: right;
}
</style>

父组件调用

<template>
<pagination
      class="pagination"
      :page="formline.current"
      :limit="formline.size"
      :total="total"
      @change="pageChange"
    />
</template>
<script>
// 分页
    pageChange(val) {
      this.formline.size = val.limit;
      this.formline.current = val.page;
      this.list();
    },
</script>

效果图