vue elementui分页,vueelementui分页功能
这篇文章主要为大家详细介绍了某视频剪辑软件组件库ElementUI实现表格列表分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ElementUI实现表格列表分页效果教程，供大家参考，具体内容如下
元素用户界面是一套采用Vue 2.0作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库，提供了配套设计资源，帮助网站快速成型
el-pagination加上@size-change="handleSizeChange、@current-change="handleCurrentChange"处理当前页和当前页数的改变事件
！-表格-
div class= form table id= form table
埃尔表
ref=Table
:data= apprItemData
:header-cell-style=headClass
row-key=approveItem
:tree-props= { children: children }
身高=420
边界
埃尔-表格-列
type=selection
宽度=55
/El-表格-列
埃尔-表格-列
标签=序号
宽度=60
align=居中
模板slot-scope="scope"{ scope .$ index 1 } }/模板
/El-表格-列
埃尔-表格-列
prop=itemCode
标签=编码
/El-表格-列
埃尔-表格-列
prop=批准名称
标签=事项名称
/El-表格-列
/el-table
/div
！-表格分页-
div class=分页
埃尔分页
背景
@size-change=handleSizeChange
@ current-change= handleCurrentChange
:page-size=[5，10，15，20，25]
:page-size=pageSize
布局=总计，大小，上一页，分页，下一页，跳转
:total=totalRow
/El-分页
/div
脚本类型=text/babel
var vm=new Vue({
埃尔： #app ，
数据：{
apprItemData : []，
当前页面：1,//当前页
totalRow: 0，//总页数
页面大小：10 //当前显示条数
},
已计算：{},
观察：{},
已创建(){},
已安装(){
这个。loaditemdata()；
},
方法：{
//加载信息
loadItemData () {
var pageSize=this.pageSize
var当前页面=this。当前页面；
控制台。log( pageSize: pageSize ，当前页面：当前页面)；
//调试器；
var geturl= $ { root }/config/load item data。做什么？rows= pageSize page=当前页面；
$.ajax({
键入：获取，
url:geturl，
内容类型：应用程序/JSON；charset=utf-8 ，
成功：函数（数据){
//调试器；
控制台。日志( totalRow:数据。合计’)；
VM。appritedata=数据。行；
VM。总计行=数量(数据。合计)；
},
错误：函数(e) {
console.log(加载数据出现错误：’，e)；
}
})
}
//表头样式设置
headClass() {
return text-align:center；背景：# f7f 7 f 7 color:# 1c 1d；
},
//页数变换
handleSizeChange(val) {
this.pageSize=val
这个。loaditemdata()；
},
//当前页变换
handleCurrentChange(val) {
this.currentPage=val
这个。loaditemdata()；
}
}
});
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。