15 自定义分页pagination全局组件

1.Pagination.vue

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.使用

 

      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

      );

    }

  },