利用vue和element-ui设置表格内容分页的实例
更新时间：2018年03月02日 10:03:01 作者：李小斌96
下面小编就为大家分享一篇利用vue和element-ui设置表格内容分页的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html代码
因为我写在template中，也就是新建了组建中，贴出代码。
<el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination>
代码中，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:function(){
return {
total:0,//默认数据总数
pagesize:7,//每页的数据条数
currentPage:1,//默认开始页面
}
}
将数据绑定到tbody上
<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
其中searchInfo是我获取到后台数据的数组。
以上这篇利用vue和element-ui设置表格内容分页的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
前端的性能瓶颈那就是页面的卡顿,当然这种页面的卡顿包含了多种原因,下面这篇文章主要给大家介绍了关于前端虚拟滚动列表实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要给大家介绍了关于如何在Vue 3中扩展Vue Router链接的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vue 虚拟DOM的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了如何基于vue2 实现图片的拖拽、旋转、鼠标滚动放大缩小等功能。文中的示例代码讲解详细，感兴趣的小伙伴可以尝试一下2022-11-11
这篇文章主要介绍了vue中el-upload上传图片到七牛的示例代码,实现思路其实也很简单，需要从后台获取七牛token上传图片到七牛，具体示例代码大家跟随小编一起学习吧2018-10-10
这篇文章主要介绍了vue使用动态组件实现TAB切换效果的方法，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-05-05
vuex里面有四个map方法，他们分别可以针对不同的元素进行不同的代码生成，本文就来详细的介绍一下vuex中的四个map方法，具有一定的参考价值，感兴趣的可以了解一下2023-05-05
本文主要介绍了Vue-cli搭建spa项目的项目实践,首先,你需要安装Vue CLI,然后通过它创建新项目,接着,选择和配置适当的插件和依赖项,以完善你的SPA项目,感兴趣的可以了解一下2023-09-09
这篇文章主要介绍了Vue中使用import进行路由懒加载的原理分析。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论