微客导航 » 文章资讯 » 利用vue和element-ui设置表格内容分页的实例

利用vue和element-ui设置表格内容分页的实例

2023-09-15 21:35:05 128

html代码

因为我写在template中，也就是新建了组建中，贴出代码。

代码中，small代表是否使用小型分页样式

layout代表组件布局，子组件名用逗号分隔

属性：total代表总条目数

事件：current-change用于监听页数改变，而内容也发生改变

其他属性可参见element官方API

http://element.eleme.io/#/zh-CN/component/pagination

监听方法,写在methods中

methods:{
created:function(){
//加载班级的数据
varurl='http://127.0.0.1:3000/clazz/findAll';
//向后台获取数据
varvm=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上

其中searchInfo是我获取到后台数据的数组。

以上这篇利用vue和element-ui设置表格内容分页的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

利用vue和element-ui设置表格内容分页的实例

热门推荐

随机推荐