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自定义的函数
Aug 05 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 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 批量删除数据的方法分析
2009/10/30 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
Django多个app urls配置代码实例
2020/11/26 Python
C#中的验证控件有几种
2014/03/08 面试题
2015年先进个人自荐书
2015/03/24 职场文书
上下班时间调整通知
2015/04/23 职场文书
中学生运动会广播稿
2015/08/19 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Redis批量生成数据的实现
2022/06/05 Redis