Vue+element UI实现分页组件
这是一个是基于element-UI
的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的资源浪费。
使用方法
由于该组件是基于element-UI
的分页组件进行二次封装,所以在使用该组件时请务必安装element-UI
(安装方式猛戳这里),安装好element-UI
后,只需将该组件文件夹Pagination
导入到现有项目中即可使用。
1 <template> 2 <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" /> 3 </template> 4 <script> 5 import Pagination from '@/components/Pagination'; 6 export default { 7 components: { Pagination }, 8 data () { 9 return { 10 list:null, //请求回来填充表格的数据 11 total:0, //数据总条数 12 page: 1, //默认显示第1页 13 limit: 10 //默认一次显示10条数据 14 } 15 }, 16 methods:{ 17 getlist(){ 18 var start = (this.page - 1) * this.limit; 19 var end = this.page * this.limit; 20 this.$axios.get(url + '?start=' + start + '&end=' + end) 21 .then(response => { 22 this.list = response.data.items; 23 this.total = response.data.total; 24 resolve(); 25 }).catch(err => { 26 reject(err); 27 }) 28 } 29 } 30 } 31 </script>
选项
属性 | 描述 | 类型 | 默认值 | 是否必须 |
---|---|---|---|---|
total | 数据总数 | Number | 0 | 是 |
page | 当前页码 | Number | 1 | 是 |
limit | 每页显示数据条目个数 | Number | 10 | 是 |
pageSizes | 每页显示个数选择器的选项设置 | Array | [10,20,30] | 否 |
layout | 组件布局 | String | 'total, sizes, prev, pager, next, jumper' | 否 |
background | 是否为分页按钮添加背景色 | Boolean | true | 否 |
效果图
完整代码请戳☞Vue-Components-Library/Pagination/
(完)
免责声明
- 本博客所有文章仅用于学习、研究和交流目的,欢迎非商业性质转载。
- 博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。
- 博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。
- 博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的文章,请原谅博主成为一个无耻的文档搬运工!
posted on 2018-08-30 12:56 难凉热血,码梦为生! 阅读(18864) 评论(0) 编辑 收藏 举报