快捷導(dǎo)航

vue使用elementUI組件實(shí)現(xiàn)分頁效果

更新時(shí)間：2023年12月18日 11:35:43 作者：isxxya

分頁在展示數(shù)據(jù)列表的場景肯定是非常多的,一般的項(xiàng)目開發(fā)中,數(shù)據(jù)量特別大,一般都是后端接口直接處理分頁返回,前端直接調(diào)用即可,本文給大家介紹了vue使用elementUI組件實(shí)現(xiàn)分頁效果,需要的朋友可以參考下

前端分頁：后臺(tái)只需將數(shù)據(jù)返回，不需要做過多處理，前端一次請(qǐng)求拿到所有數(shù)據(jù)后做分頁處理。但數(shù)據(jù)量不能太大，因?yàn)榍岸耸窍纫淮涡约虞d所有數(shù)據(jù)，然后在做分頁處理。在數(shù)據(jù)量多的情況下，加載相對(duì)應(yīng)的會(huì)變慢。所有在前端做分頁時(shí)要先考慮一下后期的數(shù)據(jù)量。

后端分頁：因?yàn)槭呛蠖朔猪?，前端在每點(diǎn)擊一次分頁時(shí)，便向后臺(tái)請(qǐng)求一次數(shù)據(jù)。其實(shí)就是避免前端一次性從數(shù)據(jù)庫獲取大量數(shù)據(jù)

一、在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 弄'
          }],
          // 默認(rèn)顯示第一條
          currentPage:1
        }
      },
      methods: {
          handleSizeChange(val) {
            console.log(`每頁 ${val} 條`);
          },
          handleCurrentChange(val) {
            console.log(`當(dāng)前頁: ${val}`);
          }
       },
    }
  </script>

二、分頁部分

前端分頁

<template>
 <div class="app">    
     <!-- 將獲取到的數(shù)據(jù)進(jìn)行計(jì)算 -->   
     <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 {
            // 總數(shù)據(jù)
           tableData:[],
           // 默認(rèn)顯示第幾頁
           currentPage:1,
           // 總條數(shù)，根據(jù)接口獲取數(shù)據(jù)長度(注意：這里不能為空)
           totalCount:1,
           // 個(gè)數(shù)選擇器（可修改）
           pageSizes:[1,2,3,4],
           // 默認(rèn)每頁顯示的條數(shù)（可修改）
           PageSize:1,
       }
   },
 methods:{
       getData(){
             // 這里使用axios，使用時(shí)請(qǐng)?zhí)崆耙?
             axios.post(url,{
                  orgCode:1
             },{emulateJSON: true},
             {
               headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} 
              }
              ).then(reponse=>{
                   console.log(reponse)
                   // 將數(shù)據(jù)賦值給tableData
                   this.tableData=data.data.body
                   // 將數(shù)據(jù)的長度賦值給totalCount
                   this.totalCount=data.data.body.length
              }) 
         },
       // 分頁
        // 每頁顯示的條數(shù)
       handleSizeChange(val) {
           // 改變每頁顯示的條數(shù) 
           this.PageSize=val
           // 注意：在改變每頁顯示的條數(shù)時(shí)，要將頁碼顯示到第一頁
           this.currentPage=1
       },
         // 顯示第幾頁
       handleCurrentChange(val) {
           // 改變默認(rèn)的頁數(shù)
           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 {
             // 總數(shù)據(jù)
            tableData:[],
            // 默認(rèn)顯示第幾頁
            currentPage:1,
            // 總條數(shù)，根據(jù)接口獲取數(shù)據(jù)長度(注意：這里不能為空)
            totalCount:1,
            // 個(gè)數(shù)選擇器（可修改）
            pageSizes:[1,2,3,4],
            // 默認(rèn)每頁顯示的條數(shù)（可修改）
            PageSize:1,
        }
    },
  methods:{
         // 將頁碼，及每頁顯示的條數(shù)以參數(shù)傳遞提交給后臺(tái)
        getData(n1,n2){
              // 這里使用axios，使用時(shí)請(qǐng)?zhí)崆耙?
              axios.post(url,{
                   orgCode:1,
                   // 每頁顯示的條數(shù)
                   PageSize:n1,
                   // 顯示第幾頁
                   currentPage:n2,
              },{emulateJSON: true},
              {
                headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} 
               }
               ).then(reponse=>{
                    console.log(reponse)
                    // 將數(shù)據(jù)賦值給tableData
                    this.tableData=data.data.body
                    // 將數(shù)據(jù)的長度賦值給totalCount
                    this.totalCount=data.data.body.length
               }) 
          },
        // 分頁
         // 每頁顯示的條數(shù)
        handleSizeChange(val) {
            // 改變每頁顯示的條數(shù) 
            this.PageSize=val
            // 點(diǎn)擊每頁顯示的條數(shù)時(shí)，顯示第一頁
            this.getData(val,1)
            // 注意：在改變每頁顯示的條數(shù)時(shí)，要將頁碼顯示到第一頁
            this.currentPage=1  
        },
          // 顯示第幾頁
        handleCurrentChange(val) {
            // 改變默認(rèn)的頁數(shù)
            this.currentPage=val
            // 切換頁碼時(shí)，要獲取每頁顯示的條數(shù)
            this.getData(this.PageSize,(val)*(this.pageSize))
        },
    },
    created:function(){
          this.getData(this.PageSize,this.currentPage) 
    }
 }
</script>

到此這篇關(guān)于vue使用elementUI組件實(shí)現(xiàn)分頁效果的文章就介紹到這了,更多相關(guān)vue elementUI分頁內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: