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

前端之家收集整理的这篇文章主要介绍了利用vue和element-ui设置表格内容分页的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

HTML代码

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

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

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中

后台获取数据 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是个返回对象的函数

页面 } }

将数据绑定到tbody上

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

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

原文链接:https://www.f2er.com/vue/33433.html

猜你在找的Vue相关文章