在做pc端项目时,在获取后端数据较多时,经常会用到分页功能,element组件库给我们提供了一个非常完善的分页组件.这里我总结一下在使用element分页组件的用法和会遇到的问题.
第一步: 先下包 npm i element-ui -S
在main.js 完整引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'; Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
如果对性能要求高的可以采取按需引入,我这里主要只是讲一下分页器的用法,就只写一下完整引入了,如果小伙伴需要学习可以去element官网 element.eleme.cn/#/zh-CN 仔细阅读一下文档.
<el-pagination layout="prev, pager, next" :total="50">
</el-pagination>
这个是最简单应用 layout表示需要显示的内容 prev表示上一页，next为下一页，pager表示页码列表，total 表示总条目数,一般会动态绑定一个变量,这个变量是后端传过来的数据.我们在应用分页组件时,也是需要自己设置每一页展示的数据数量, 这个时候也需要添加一下:page-size="20" 属性每页展示的数量为20个,默认情况下当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过pager-count属性可以设置最大页码按钮数。
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000">
</el-pagination>
还有一些属性 small 小型分页器默认值为false 设置就表示值为true这个时候分页器占的空间会相对较小
正常大小
还可以设置背景色 background 注意background的值为布尔值,并不是颜色 如果想要设置颜色可以通过给分页组件添加css样式来设置背景色.
通过设置size-change和current-change事件来处理页码大小和当前页变动时候触发的事件。
@size-change="事件处理方法"
@current-change="事件处理方法"
设置page-sizes属性接受一个整型数组，数组元素为展示的选择每页显示个数的选项，
基本上一些基础的用法,都写到了,如果想要深入学习还是去官网上慢慢摸索.加油小伙伴们!!
