博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue+element UI实现分页组件
阅读量:5008 次
发布时间:2019-06-12

本文共 566 字,大约阅读时间需要 1 分钟。

介绍

这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的资源浪费。

使用方法

由于该组件是基于element-UI的分页组件进行二次封装,所以在使用该组件时请务必安装element-UI),安装好element-UI后,只需将该组件文件夹Pagination导入到现有项目中即可使用。

示例

1 
4

 

选项

属性 描述 类型 默认值 是否必须
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

效果图

 

完整代码请戳☞

(完)

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

你可能感兴趣的文章
数据库多对多关联表(Python&MySQL)
查看>>
[实变函数]1.2 集合的运算
查看>>
第06天
查看>>
设计模式的征途—5.原型(Prototype)模式
查看>>
Fiddler中添加serverIP
查看>>
mysql的某个数据库拒绝访问的问题
查看>>
C# ~ 从 XML 到 Linq 到 Linq to XML
查看>>
常用汉字的五笔拆法
查看>>
1044: [HAOI2008]木棍分割 - BZOJ
查看>>
资源:数据库原理
查看>>
后进先出 stack、 先进先出Queue
查看>>
来常工富藤的第一天
查看>>
你想到了,就有别人去实现,那你为什么不去实现呢
查看>>
OSI与TCP/IP模型
查看>>
【IT笔试面试题整理】丑数
查看>>
敏捷开发一千零一问系列之六:业务人员怎样参与开发?
查看>>
双向链表
查看>>
RAL调用
查看>>
freemarker 设置文本内容超过一定长度 用省略号代替
查看>>
jQuery.reveal弹出层使用
查看>>