Vue+ElementUI table實現表格分頁

更新時間：2019年12月14日 15:46:36 作者：小城聽風雨

這篇文章主要為大家詳細介紹了Vue+ElementUI table實現表格分頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Vue+ElementUI table表格分頁，供大家參考，具體內容如下

分頁的兩種方式。前端分頁，后端分頁。兩種方式各有個的優(yōu)缺點吧。

前端分頁：后臺只需將數據返回，不需要做過多處理，前端一次請求拿到所有數據后做分頁處理。但數據量不能太大，因為前端是先一次性加載所有數據，然后在做分頁處理。在數據量多的情況下，加載相對應的會變慢。所有在前端做分頁時要先考慮一下后期的數據量。

后端分頁：因為是后端分頁，前端在每點擊一次分頁時，便向后臺請求一次數據。其實就是避免前端一次性從數據庫獲取大量數據

一、在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: '上海市普陀區(qū)金沙江路 1518 弄'
     }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1517 弄'
     }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1519 弄'
     }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 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，使用時請?zhí)崆耙?
       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，使用時請?zhí)崆耙?
       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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: