Vue+ElementUI table實現表格分頁

本篇文章為大家展示了Vue+ElementUI table實現表格分頁，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一、在elementUI中將表格、分頁引入自己的頁面中

<template>
 <div class="app">
   <el-table :data="tableData" >
     <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)" >
     <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" >
     <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+ElementUI table實現表格分頁，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。