elementui分页组件的样式_vue2组件系列第四十三节：Pagination 分页

Pagination分页在手机端其实不太常用，在手机端一般是上滑无限加载。

准备工作：

1. 创建一个页面: Pagination.vue
2. 在router.js里配置 Pagination页面的路由

{ path: '/pagination', name: 'pagination', component: () => import('./views/Pagination.vue') }

1. 在index.vue里添加一项

Pagination 分页

至今为止呢，我们的首页显示的样式子是这样滴〜不知道不觉间我们已经学完了39个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Pagination分页：

基础方法：

data() { return { currentPage: 1 } },

total-items: 信息条数

items-per-page:每页显示的条数

简单模式：

显示省略号：

show-page-size：显示页码的个数(这个是必须的)

force-ellipses：显示省略号

只有超出显示页码个数才会显示省略号。

此组件有一个change事件，当变换页码时会触发。在实际项目中，在change事件里进行ajax请求当前页的数据。

到目前为止呢，Pagination分页就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧〜明天继续加油噢！加油