在vue项目中使用Element-ui如何实现一个分页效果

　　介绍

这篇文章将为大家详细讲解有关在vue项目中使用Element-ui如何实现一个分页效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

<强>分页技术

分页就是将所有的数据分段展示给用户,用户看到的可能不是全部的数据,而是其中一部分,用户可以通过点击页码来查找自己需要的内容,也可以通过模糊查询获取符合内容的数据

分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢,# 63;如果数据量少的话当然可以。但是对于企业信息系统来说数据量不会限制在一个小范围内。如果不顾一切的Select * from某个表,再将返回的数据一古脑的扔给客户,即使客户能够忍受成千上万足够让人眼花缭乱的表格式数据,繁忙的网络,紧张的服务器也会提出它们无声的抗议,甚至有时会以彻底的罢工

在el-tree控件中将内容按照一个页面显示十条数据,来实现分页的效果

实现效果:el-tree

& lt; template> 　　& lt; div类=癰ig"祝辞　　& lt; div类=皌op"祝辞　　& lt; el-input占位符=八阉鳌?v模型=皊earchData"@input=皊earch"祝辞& lt;/el-input> 　　& lt;/div> 　　& lt; div类=癿iddle"祝辞　　& lt; el-tree:数据=https://www.yisu.com/zixun/"列表"> 　　　　　　 {{data.name}} {{data.age}} 　　　　　　

　　

　　

　　

　　

　　 & lt; script> 　　出口默认{ 　　数据(){ 　　返回{ 　　数据:[{ 　　名称:& # 39;aa # 39; 　　年龄:12 　　}, 　　{ 　　名称:& # 39;bb # 39; 　　年龄:13 　　}//列,举一部分的数据　　列表:[],//显示的数据　　限制:10//条数,每一页显示的数量//总:20日所有的数量　　页:1、//当前页　　searchData: & # 39; & # 39;//搜索内容　　} 　　}, 　　创建(){ 　　this.pageList () 　　}, 　　方法:{ 　　pageList () { 　　this.getList () 　　},//处理数据　　getList () {//es6过滤得到满足搜索条件的展示数据列表　　var=this.data列表。过滤器((项目,索引)=比; 　　item.name.includes (this.searchData) 　　)//搜索符号条件的内容　　console.log(列表) 　　这一点。列表=９似?(项目,索引)=比; 　　指数& lt;这一点。*这页。限制,,指数在=Ｏ拗?(这一点。- 1页) 　　)//根据页数显示相应的内容　　这一点。总=list.length 　　},//当每页数量改变　　handleSizeChange (val) { 　　控制台。日志(“每页$ {val}条”); 　　这一点。限制=瓦尔　　this.getList () 　　},//当当前页改变　　handleCurrentChange (val) { 　　控制台。日志(“当前页:$ {val}’); 　　这一点。页面=瓦尔　　this.getList () 　　},//搜索过滤数据　　search () { 　　这一点。页面=1 　　this.getList () 　　} 　　}, 　　} 　　& lt;/script>

el-table实现分页效果也是类似的

展示效果

html的代码,js的代码和树的分页差不多,el-table的分页添加了可以选择显示的数量,以及跳转页码

& lt; div类=癰ig"比; 　　& lt; el-row> 　　& lt; el-col:跨度=?1“比; 　　& lt; el-input v模型=皊earchData"@input=皊earch"占位符=笆淙胄彰阉鳌白４? lt;/el-input> 　　& lt;/el-col> 　　& lt; el-col:跨度=?“在　　& lt; el-button类型=皊uccess"@click=皊earch"祝辞搜索& lt;/el-button> 　　& lt;/el-col> 　　& lt;/el-row> 　　& lt; el-table:数据=https://www.yisu.com/zixun/傲斜怼北呓? 　　　　

　　　　

　　

在vue项目中使用Element-ui如何实现一个分页效果

上一篇下一篇