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中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
js制作支付倒计时页面
Oct 21 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 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.ini中文版(2)
2006/10/09 PHP
adodb与adodb_lite之比较
2006/12/31 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
python的re正则表达式实例代码
2018/01/24 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python验证身份证信息实例代码
2019/05/06 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
自我鉴定范文200字
2013/10/02 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS