Vue项目 封装Element-ui中的el-pagination作为公用分页组件

原因：分页在项目当中使用非常频繁，因此就将el-pagination封装为了一个全局组件

话不多说直接上代码

1.首先在components下面新建一个pagination.vue文件

代码如下：

查看代码

2. 在main.js中我们需要引入，并将该组件注册为全局组件

查看代码

// 自定义分页组件

import Pagination from '@/components/Pagination'

// 全局组件挂载

Vue.component('Pagination', Pagination)

3. 具体使用

查看代码

@pagination="pagination"

v-show="total > 0"

:total="total"

:page.sync="currentPage"

:limit.sync="pageSize"

/>

// 分页信息

currentPage: 1,

pageSize: 5,

total: 0,

/**

* 请求分页

*/

pagination(p) {

this.fetchDataNoMessage(p.page, p.limit)

},

思路来源