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>

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