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/

（完）

转载于:https://www.cnblogs.com/wangjiachen666/p/9545456.html