本文实例为大家分享了vue+Element实现分页效果的具体代码，供大家参考，具体内容如下
一般样式都是card里面包含列表和分页
这里就直接上代码了
<el-card>
<!-- 用户列表区域 -->
<el-table :data="rightsList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe>
<el-table-column label="#" type="index"></el-table-column>
<el-table-column label="权限名称" prop="authName"></el-table-column>
</el-table>
<!--分页区域-->
<el-pagination
@size-change="size_change" //pageSize 改变时会触发
@current-change="current_change" //currentPage 改变时会触发
:current-page="currentPage" //当前页数
:page-sizes="[10,20,30]" //每页显示个数选择器的选项设置
:page-size="pagesize" //每页显示条目个数
layout="total, sizes, prev, pager, next, jumper" //组件布局
:total="rightsList.length //总条目数
">
</el-pagination>
</el-card>
然后定义一下数据
data() {
return {
rightsList:[], //列表数据
total:0,//总条目数
pagesize:10,//每页显示条目个数
currentPage:1,//当前页数
}
},
监听改变事件
methods:{
//监听 pagesize 改变的事件
size_change(newSize){
this.pagesize = newSize
}
//监听 页码值 改变的事件
current_change(newPage){
this.currentPage = newPage
},
}
效果如图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- 利用vue + element实现表格分页和前端搜索的方法
- Vue+element-ui 实现表格的分页功能示例
- vue + element-ui的分页问题实现
- 利用vue和element-ui设置表格内容分页的实例
- vue+element tabs选项卡分页效果
- Vue+ElementUI table实现表格分页
- vue+elementUI组件table实现前端分页功能
- vue+Element-ui前端实现分页效果
- vue仿element实现分页器效果
- Vue+Element-U实现分页显示效果
本文由 华域联盟 原创撰写：华域联盟 » vue+Element实现分页效果
转载请保留出处和原文链接：https://www.cnhackhy.com/82396.htm
