Vue+ElementUI table实现表格分页


Posted in Javascript onDecember 14, 2019

Vue+ElementUI table表格分页,供大家参考,具体内容如下

分页的两种方式。前端分页,后端分页。两种方式各有个的优缺点吧。

前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理。但数据量不能太大,因为前端是先一次性加载所有数据,然后在做分页处理。在数据量多的情况下,加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。

后端分页:因为是后端分页,前端在每点击一次分页时,便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据

一、在elementUI中将表格、分页引入自己的页面中

<template>
 <div class="app">
   <el-table :data="tableData" 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>
   <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[100, 200, 300, 400]"
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400">
   </el-pagination>
 </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
    }
   },
   methods: {
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
     },
     handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
     }
    },
  }
</script>

二、前端分页(在一的基础上添加分页功能)

<template>
 <div class="app">  
   <!-- 将获取到的数据进行计算 -->  
   <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="tabListPage">
      <el-pagination @size-change="handleSizeChange" 
             @current-change="handleCurrentChange" 
             :current-page="currentPage" 
             :page-sizes="pageSizes" 
             :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" 
             :total="totalCount">
       </el-pagination>
    </div>
</div>
</template>
<script>
export default {
  data(){
    return {
      // 总数据
      tableData:[],
      // 默认显示第几页
      currentPage:1,
      // 总条数,根据接口获取数据长度(注意:这里不能为空)
      totalCount:1,
      // 个数选择器(可修改)
      pageSizes:[1,2,3,4],
      // 默认每页显示的条数(可修改)
      PageSize:1,
    }
  },
 methods:{
    getData(){
       // 这里使用axios,使用时请提前引入
       axios.post(url,{
         orgCode:1
       },{emulateJSON: true},
       {
        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} 
       }
       ).then(reponse=>{
          console.log(reponse)
          // 将数据赋值给tableData
          this.tableData=data.data.body
          // 将数据的长度赋值给totalCount
          this.totalCount=data.data.body.length
       }) 
     },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数 
      this.PageSize=val
      // 注意:在改变每页显示的条数时,要将页码显示到第一页
      this.currentPage=1
    },
     // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage=val
    },
  },
  created:function(){
     this.getData() 
  }
}
</script>

三、后端分页(在一的基础上添加分页功能)

<template>
 <div class="app"> 
   <el-table :data="tableData" 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="tabListPage">
      <el-pagination @size-change="handleSizeChange" 
              @current-change="handleCurrentChange" 
              :current-page="currentPage" 
              :page-sizes="pageSizes" 
              :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" 
              :total="totalCount">
       </el-pagination>
    </div>
 </div>
</template>
<script>
export default {
  data(){
    return {
       // 总数据
      tableData:[],
      // 默认显示第几页
      currentPage:1,
      // 总条数,根据接口获取数据长度(注意:这里不能为空)
      totalCount:1,
      // 个数选择器(可修改)
      pageSizes:[1,2,3,4],
      // 默认每页显示的条数(可修改)
      PageSize:1,
    }
  },
 methods:{
     // 将页码,及每页显示的条数以参数传递提交给后台
    getData(n1,n2){
       // 这里使用axios,使用时请提前引入
       axios.post(url,{
          orgCode:1,
          // 每页显示的条数
          PageSize:n1,
          // 显示第几页
          currentPage:n2,
       },{emulateJSON: true},
       {
        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} 
        }
        ).then(reponse=>{
          console.log(reponse)
          // 将数据赋值给tableData
          this.tableData=data.data.body
          // 将数据的长度赋值给totalCount
          this.totalCount=data.data.body.length
        }) 
     },
    // 分页
     // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数 
      this.PageSize=val
      // 点击每页显示的条数时,显示第一页
      this.getData(val,1)
      // 注意:在改变每页显示的条数时,要将页码显示到第一页
      this.currentPage=1 
    },
     // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage=val
      // 切换页码时,要获取每页显示的条数
      this.getData(this.PageSize,(val)*(this.pageSize))
    },
  },
  created:function(){
     this.getData(this.PageSize,this.currentPage) 
  }
 }
</script>

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

Javascript 相关文章推荐
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 #Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 #Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 #Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 #Javascript
Vue分页效果与购物车功能
Dec 13 #Javascript
如何在微信小程序中存setStorage
Dec 13 #Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 #Javascript
You might like
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
js 调用百度分享功能
2017/02/27 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python中偏函数partial用法实例分析
2015/07/08 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
法警的竞聘演讲稿
2014/01/02 职场文书
九年级化学教学反思
2014/01/28 职场文书
公司外出活动方案
2014/08/14 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2014年商场工作总结
2014/11/22 职场文书