15 自定义分页pagination全局组件

<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]
      },