利用vue和element

利用vue和element

html代码

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

small

layout="prev, pager, next"

:total="total"

@current-change="current_change">

small

layout="prev, pager, next"

:total="total"

@current-change="current_change">

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

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

属性： total代表总条目数

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

其他属性可参见element官方API

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

监听方法,写在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:functiPIWRhDon(){

return {

total:0,//默认数据总数

pagesize:7,//每页的数据条数

currentPage:1,//默认开始页面

}

}

将数据绑定到tbody上

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。