15 自定义分页pagination全局组件

1.Pagination.vue

<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>

2.index.js

import Pagination from './Pagination'
const compName = Pagination.name

export default {
  install(Vue) {
    Vue.component(compName, Pagination)
  }
}

3.注册

import Pagination from './components/globalComponents/pagination'
Vue.use(Pagination)

4.使用

 <el-table

      v-if="newList.length!==0"

      :data="computedNewsList"

 

    >

。。。

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

      // el-table里面data传给全局Pagnation组件的props值
      paginationData: {
        total: 0,
        currentPage: 1,
        pageSize: 3,
        pageSizes: [3, 6, 9]
      },

 computed: {

    computedNewsList() {

      // paginationData对象里面任何一个数据发生变化，都有触发

      return this.newList.slice(

        (this.paginationData.currentPage - 1) * this.paginationData.pageSize,

        this.paginationData.currentPage * this.paginationData.pageSize

      );

    }

  },