Vue+ElementUI table实现表格分页

更新时间：2019年12月14日 15:46:36 作者：小城听风雨

这篇文章主要为大家详细介绍了Vue+ElementUI table实现表格分页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue使用Google Recaptcha验证的实现示例
我们最近的项目中需要使用谷歌机器人验证，所以就动手实现一下，本文就来详细的介绍一下vue Google Recaptcha验证，感兴趣的可以了解一下
2021-08-08
vue使用json最简单的两种方式分享
这篇文章主要介绍了vue使用json最简单的两种方式分享，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue中使用jsencrypt进行RSA非对称加密的操作方法
这篇文章主要介绍了Vue中使用jsencrypt进行RSA非对称加密，在这里需要注意要加密的数据必须是字符串，对Vue RSA非对称加密相关知识感兴趣的朋友一起看看吧
2022-04-04
浅谈关于vue中scss公用的解决方案
这篇文章主要介绍了浅谈关于vue中scss公用的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
Vue2异步更新及nextTick原理详解
Vue2的异步更新机制是基于JavaScript的事件循环机制实现的。nextTick方法则是在DOM更新后执行回调函数。本文详细介绍了Vue2的异步更新机制和nextTick原理，对于理解Vue2的渲染机制和优化性能有很大的帮助。
2023-04-04
Ant design vue中的联动选择取消操作
这篇文章主要介绍了Ant design vue中的联动选择取消操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue多页面配置详情
这篇文章主要介绍了vue多页面配置，单页应用这个概念，是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里，我们在页面渲染中讲了页面的局部刷新,而单页应用则是使用了页面的局部刷新的能力,下面来看看详细内容,需要的朋友可以参考一下
2021-11-11
Vue 开发音乐播放器之歌手页右侧快速入口功能
这篇文章主要介绍了Vue 开发音乐播放器之歌手页右侧快速入口功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
vue中组件之间相互传值的6种方法小结
Vue.js 中组件间通信的方法有很多种,这篇文章主要为大家详细介绍了6种常见的直接或间接的组件传值方式,有需要的小伙伴可以参考一下
2024-01-01
vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码
本文主要介绍了vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12