vue+elementUI组件table实现前端分页功能


Posted in Javascript onNovember 15, 2020

前端分页和后端分页就是请求的差异,前端分页的话只请求一次,所以要在render table组件的时候控制下数据

:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"   //不多解释

再就是设置分页器total等于table数据的长度

:total="tableData.length"

点击分页器的操作

methods: {
  handleSizeChange(val) {
   console.log(`每页 ${val} 条`);
   this.currentPage = 1;
   this.pageSize = val;
  },
  handleCurrentChange(val) {
   console.log(`当前页: ${val}`);
   this.currentPage = val;
  }
 }

千言万语不如上个demo~

<template>
 <div>
  <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
   <el-table-column prop="date" label="日期" width="180">
   </el-table-column>
   <el-table-column prop="name" label="姓名" width="180">
   </el-table-column>
   <el-table-column prop="address" label="地址">
   </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <div class="block" style="margin-top:15px;">
   <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1,5,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
   </el-pagination>
  </div>
 </div>
 
</template>
 
 <script>
export default {
 data() {
  return {
   tableData: [
    {
     date: "2016-05-02",
     name: "王小虎",
     address: "上海市普陀区金沙江路 1518 弄"
    },
    {
     date: "2016-05-04",
     name: "王小虎",
     address: "上海市普陀区金沙江路 1517 弄"
    },
    {
     date: "2016-05-01",
     name: "王小虎",
     address: "上海市普陀区金沙江路 1519 弄"
    },
    {
     date: "2016-05-03",
     name: "王小虎",
     address: "上海市普陀区金沙江路 1516 弄"
    }
   ],
   currentPage: 1, // 当前页码
   total: 20, // 总条数
   pageSize: 1 // 每页的数据条数
  };
 },
 methods: {
  handleSizeChange(val) {
   console.log(`每页 ${val} 条`);
   this.currentPage = 1;
   this.pageSize = val;
  },
  handleCurrentChange(val) {
   console.log(`当前页: ${val}`);
   this.currentPage = val;
  }
 }
};
</script>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
srcElement表格样式
Sep 03 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
js 表单验证方法(实用)
Apr 28 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
Vue+ElementUI table实现表格分页
Dec 14 #Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 #Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 #Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 #Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 #Javascript
Vue分页效果与购物车功能
Dec 13 #Javascript
如何在微信小程序中存setStorage
Dec 13 #Javascript
You might like
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
js版本A*寻路算法
2006/12/22 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
python3 反射的四种基本方法解析
2019/08/26 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
厂长岗位职责
2014/02/19 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
如何理解及使用Python闭包
2021/06/01 Python
python自动化八大定位元素讲解
2021/07/09 Python
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记