elementUI實現分頁

isxxya發表於2020-09-29
UI

分頁的兩種方式。前端分頁，後端分頁

  • 前端分頁：後臺只需將資料返回，不需要做過多處理，前端一次請求拿到所有資料後做分頁處理。但資料量不能太大，因為前端是先一次性載入所有資料，然後在做分頁處理。在資料量多的情況下，載入相對應的會變慢。所有在前端做分頁時要先考慮一下後期的資料量。
  • 後端分頁：因為是後端分頁，前端在每點選一次分頁時，便向後臺請求一次資料。其實就是避免前端一次性從資料庫獲取大量資料

一、在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>

相關文章