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 相关文章推荐
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
js实现贪吃蛇游戏(简易版)
Sep 29 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将进程作为守护进程的方法
2015/03/19 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
基于form-data请求格式详解
2019/10/29 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
学生实习自我鉴定
2013/10/11 职场文书
英文版餐饮运营管理求职信
2013/11/06 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
大学生社会实践方案
2014/05/11 职场文书
机械专业求职信
2014/05/25 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
电力工程合作意向书
2015/05/11 职场文书
PyMongo 查询数据的实现
2021/06/28 Python