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

HTML代码

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

rush:xhtml;">

代码中,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中

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中注册使用的数据

因为我是全局注册,data是个返回对象的函数

rush:xhtml;"> data:function(){ return { total:0,//认数据总数 pagesize:7,//每页的数据条数 currentPage:1,//认开始页面 } }

将数据绑定到tbody上

rush:xhtml;">

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

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

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...