<template>

  <el-pagination

    @size-change="handleSizeChange"

    @current-change="handleCurrentChange"

    background

    :current-page="paginationData.currentPage"

    :page-sizes="paginationData.pageSizes"

    :page-size="paginationData.PageSize"

    layout="total, sizes, prev, pager, next, jumper"

    :total="paginationData.total"

  ></el-pagination>

</template>

<script>

export default {

  name: "Pagination",

  props:{

    paginationData:{

      type:Object,

      required:true

    }

  },

  data() {

    return {

    };

  },

  methods: {

    handleSizeChange(val) {

      this.paginationData.pageSize = val;

    },

    handleCurrentChange(val) {

      this.paginationData.currentPage = val;

    }

  }

};

</script>

<style lang="scss" scoped>

</style>

import Pagination from './Pagination'

const compName = Pagination.name

export default {

  install(Vue) {

    Vue.component(compName, Pagination)

  }

}

import Pagination from './components/globalComponents/pagination'

Vue.use(Pagination)

<pagination :pagination-data="paginationData"></pagination>

      // el-table里面data传给全局Pagnation组件的props值

      paginationData: {

        total: 0,

        currentPage: 1,

        pageSize: 3,

        pageSizes: [3, 6, 9]

      },