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


Posted in Javascript onMarch 02, 2018

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设置表格内容分页的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 #Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 #Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 #Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 #Javascript
vue中添加mp3音频文件的方法
Mar 02 #Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 #Javascript
select标签设置默认选中的选项方法
Mar 02 #Javascript
You might like
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
帝国cms目录结构分享
2015/07/06 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
总结js函数相关知识点
2018/02/27 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
pytorch 共享参数的示例
2019/08/17 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
thinkphp5 路由分发原理
2021/03/18 PHP
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
文明宿舍获奖感言
2014/02/07 职场文书
初中家长寄语
2014/04/02 职场文书
暑假家长评语大全
2014/04/17 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
销售会议开幕词
2015/01/28 职场文书
会议主持词通用版
2019/04/02 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
vue判断按钮是否可以点击
2022/04/09 Vue.js