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 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
JQuery datepicker 使用方法
May 20 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 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
一个SQL管理员的web接口
2006/10/09 PHP
PHP实现图片简单上传
2006/10/09 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
js实现五星评价功能
2017/03/08 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
python 实现红包随机生成算法的简单实例
2017/01/04 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
Python里面如何拷贝一个对象
2014/02/17 面试题
介绍一下Java的事务处理
2012/12/07 面试题
师德学习感言
2014/01/31 职场文书
公司中秋节活动方案
2014/02/12 职场文书
《老王》教学反思
2014/02/23 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
护士工作心得体会
2016/01/25 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Python提取PDF指定内容并生成新文件
2021/06/09 Python