Vue+element UI实现分页组件 - 难凉热血,码梦为生!

vue

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数据总数Number0
page当前页码Number1
limit每页显示数据条目个数Number10
pageSizes每页显示个数选择器的选项设置Array[10,20,30]
layout组件布局String\'total, sizes, prev, pager, next, jumper\'
background是否为分页按钮添加背景色Booleantrue

效果图

完整代码请戳☞Vue-Components-Library/Pagination/

(完)

以上是 Vue+element UI实现分页组件 - 难凉热血,码梦为生! 的全部内容, 来源链接: utcz.com/z/380278.html

回到顶部