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 相关文章推荐
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
JS实现页面打印功能
Mar 16 Javascript
vue-router单页面路由
Jun 17 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
读jQuery之五(取DOM元素)
2011/06/20 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
javascript 闭包详解
2015/07/02 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
python中import reload __import__的区别详解
2017/10/16 Python
Python退火算法在高次方程的应用
2018/07/26 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
python根据文本生成词云图代码实例
2019/11/15 Python
python实现ftp文件传输功能
2020/03/20 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
阳光体育活动方案
2014/02/16 职场文书
相亲活动方案
2014/08/26 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
嘉宾邀请函
2015/01/31 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android