vue elementui分页,elementui分页功能

　　本文主要详细介绍vue元素的分页效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue元素实现分页效果的具体代码，供大家参考。具体内容如下

　　一般样式是卡片，包含列表和分页。

　　这是代码。

　　电子贺卡

　　！-用户列表区-

　　El-table:data= rights list . slice((current page-1)* pagesize，currentPage*pagesize)边框条纹

　　el-table-column标签=# 类型=索引/el-table-column

　　El-table-column label= permission name prop= authname /El-table-column

　　/el-table

　　！-寻呼区-

　　el分页

　　@ size-change= size _ change //PageSize变化时会触发。

　　@ current-change= current _ change //当前页面发生变化时触发

　　:当前页面=当前页面//当前页数

　　:page-sizes=[10，20，30] //每页显示数字选择器的选项设置。

　　:page-size=pagesize //每页显示的项目数

　　Layout= total，sizes，prev，pager，next，jumper //组件布局

　　:total=rightsList.length //条目总数

　　/El-分页

　　/电子名片

　　然后定义数据。

　　data() {

　　返回{

　　RightsList:[]，//列出数据

　　总计：0，//条目总数

　　Pagesize:10，//显示每页的条目数

　　CurrentPage:1，//当前的页数

　　}

　　},

　　监控变更事件

　　方法：{

　　//侦听pagesize更改的事件

　　size_change(新尺寸){

　　this.pagesize=newSize

　　}

　　//侦听页码更改事件

　　当前更改(新页面){

　　this.currentPage=newPage

　　},

　　}

　　如图所示

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。