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 相关文章推荐
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
php下连接mssql2005的代码
2011/01/17 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
python中dir函数用法分析
2015/04/17 Python
python实现K最近邻算法
2018/01/29 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
flask框架中的cookie和session使用
2021/01/31 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
网络教育毕业生自我鉴定
2013/10/10 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
商业计划书范文
2019/04/24 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS