vue elementui分页,element 前端分页
本文主要详细介绍vue元素——ui前端的分页效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue Element-ui前端实现分页效果的具体代码，供大家参考。具体内容如下
分页技术
分页技术的概念
分页是向用户展示所有的数据段。用户可能看不到所有的数据，但可以看到其中的一部分。用户可以点击页码找到自己需要的内容，也可以通过模糊查询得到符合内容的数据。
分页的意义
分页确实有效，但是肯定会增加系统的复杂度，但是可以不分页吗？当然，如果数据量小的话。但是对于企业信息系统来说，数据量不会局限在很小的范围内。如果你不顾一切地从一个表中选择*，然后把返回的数据扔给客户，即使客户能容忍成千上万令人眼花缭乱的表格数据，繁忙的网络和紧张的服务器也会做出他们无声的抗议，有时甚至会彻底罢工。
前端实现分页效果
在el-tree控件中，内容按照一页十条数据显示，达到分页的效果。
实施效果：el树
模板
div class=大
div class=top
El-input占位符= search v-model= search data @ input= search /El-input
/div
div class=middle
el-tree :data=list
span slot-scope=“{ node，data }”
span class= El-icon-tickets /span
span { { data . name } } { { data . age } }/span
/span
/el-tree
/div
div class=bottom
El-pagination @ size-change= handlesize change @ current-change= handleCurrentChange background:current-page= page
:page-size=limit layout=prev，pager，next :total= total /El-pagination
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
数据：[{
名称： aa ，
年龄：12岁
},
{
姓名： bb ，
年龄：13岁
}
]，//列出一些数据
列表：[]，//显示的数据
限制：10，//条数，每页显示的数量。
总计：20，//所有数量
Page: 1，//当前页面
SearchData: //搜索内容
}
},
已创建(){
this.pageList()
},
方法：{
页面列表(){
this.getList()
},
//处理数据
getList() {
//es6过滤，得到符合搜索条件的显示数据列表。
var list=this.data.filter((item，index)=)
item . name . includes(this . search data)
)//搜索符号条件的内容
console.log(列表)
this.list=list.filter((item，index)=)
index this . page * this . limit index=this . limit *(this . page-1)
)//根据页数显示相应的内容。
this.total=列表.长度
},
//当页数改变时
handleSizeChange(val) {
Console.log(每页`${val}个项目`)；
this.limit=瓦尔
this.getList()
},
//当当上一页修改
handleCurrentChange(val) {
Console.log(`当前页面：$ { val } `)；
this.page=val
this.getList()
},
//搜索过滤的数据
search() {
this.page=1
this.getList()
}
},
}
/脚本
el-table的分页效果也类似。
显示效果
Html代码，js代码类似于树的分页，el-table的分页增加了可选显示的数量，以及跳转的页码。
div class=大
el-row
el-col :span=21
El-input v-model= search data @ input= search placeholder= enter name search /El-input
/el-col
el-col :span=3
El-button type= success @ click= search 搜索/el-button
/el-col
/el-row
el-table :data=list border
El-table-column标签= name 属性=name/el-table-column
El-table-column标签=年龄属性=年龄/el-table-column
/el-table
div style= text-align:center；
El-pagination @ size-change= handlesize change @ current-change= handleCurrentChange
:current-page= page :page-size=[1，2，5，10] :page-size=limit
layout=total，sizes，prev，pager，next，jumper :total=total
/El-分页
/div
/div
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。