el-pagination分页组件的封装

Pagination.vue页面

<template>
  <div class="clearfix">
    <el-pagination
      class="pagination flr"
	  background
      :layout="tools"
      :current-page.sync="no"
      :page-size.sync="size"
      :page-sizes="sizes"
      :total="total"
      v-bind="$attrs"
      v-on="$listeners"
    >
    el-pagination>
  div>
template>

<script>
  export default {
    name: 'Pagination',
    components: {},
    filters: {},
    props: {
      pageNo: {
        type: Number,
        required: true
      },
      pageSize: {
        type: Number,
        required: true
      },
      total: {
        type: Number,
        required: true
      },
      getDataFun: {
        type: Function,
        required: true
      },
      sizes: {
        type: Array,
        default: () => [10, 20, 50,100]
      },
      tools: {
        type: String,
        default: 'prev,pager,next,sizes,total,jumper'
      }
    },
    data() {
      return {
        size: this.pageSize,
        no: this.pageNo
      };
    },
    computed: {
    },
    watch: {
      no(val) {
		this.$emit('update:pageSize', this.size);
        this.$emit('update:pageNo', val);
        this.getDataFun();
      },
      size(val) {
        this.$emit('update:pageSize', val);

        this.pageNo == 1 ? this.getDataFun() : this.$emit('update:pageNo', 1);
      },
      pageNo(val) {
        this.no = val;
      },
      pageSize(val) {
        this.size = val;
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {}
  };
script>

<style scoped lang="scss">
  .pagination{
	float:right;
	margin:10px 10px 10px 0;
  }
style>

调用的的页面

<pagination :pageSize.sync="pageSize" :pageNo.sync="pageNo" :total="total" :sizes="[10, 20, 50,100]" :getDataFun="getProList">pagination>

import Pagination from “@/components/Pagination”;

components: {pagination: Pagination},

//页数
pageNo: 1,
//每页的数量
pageSize: 10,
//总数
total: 0,

getProList()方法是查询表格数据接口的方法

本文是给自己记录一下，如有问题，还请勿怪！