因为我写在template中,也就是新建了组建中,贴出代码。
rush:xhtml;">
layout代表组件布局,子组件名用逗号分隔
属性: total代表总条目数
事件: current-change用于监听页数改变,而内容也发生改变
其他属性可参见element官方API
nofollow" target="_blank" href="http://element.eleme.io/#/zh-CN/component/pagination">http://element.eleme.io/#/zh-CN/component/pagination
监听方法,写在methods中
rush:xhtml;">
methods:{
created:function(){
//加载班级的数据
var url ='http://127.0.0.1:3000/clazz/findAll';
//向后台获取数据
var vm = this;
$.getJSON(url,function(data){
vm.clazzInfo = data;
vm.total = data.length;//设置数据总数目!!!
});
},current_change:function(currentPage){
this.currentPage = currentPage;
}
}
其中url是在后台express搭建起来的脚手架所设置好的路由。
在data中注册使用的数据
rush:xhtml;">
data:function(){
return {
total:0,//默认数据总数
pagesize:7,//每页的数据条数
currentPage:1,//默认开始页面
}
}
将数据绑定到tbody上
rush:xhtml;">
以上这篇利用vue和element-ui设置表格内容分页的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。