利用vue和element-ui设置表格内容分页
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
html代码
因为我写在template中,也就是新建了组建中,贴出代码。
<el-pagination
small
layout="prev, pager, next"
:total="total"
@current-change="current_change">
</el-pagination>
代码中,small代表是否使用小型分页样式
layout代表组件布局,子组件名用逗号分隔
属性: total代表总条目数
事件: current-change用于监听页数改变,而内容也发生改变
其他属性可参见element官方API
- 监听方法,写在methods中
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中注册使用的数据
因为我是全局注册,data是个返回对象的函数
data:function(){
return {
total:0,//默认数据总数
pagesize:7,//每页的数据条数
currentPage:1,//默认开始页面
}
}
- 将数据绑定到tbody上
<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
其中searchInfo是我获取到后台数据的数组。
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)