有這么個場景，后端接口的列表數(shù)據(jù)沒有做分頁給我，相當于是直接返回所有的列表數(shù)據(jù)，比如有100條就返回100，但是前端顯示，則需要做成分頁，比如10條為一頁。

一、如何使用elementUI+vue實現(xiàn)前端分頁

假如你用vue來實現(xiàn)，思路就是將數(shù)據(jù)切割，然后分批顯示。

所以可以使用 computed 計算屬性和 v-for 指令來實現(xiàn)前端分頁。

因為后端返回給你的數(shù)據(jù)，你一般會整個存放在一個數(shù)組中，要顯示第一頁，其實就是在該數(shù)組中分割提取下標為0-9的數(shù)據(jù)項，如果是第三頁，則在該數(shù)組中提取第20-29的數(shù)據(jù)項，創(chuàng)建一個計算屬性，在該計算屬性中完成數(shù)據(jù)的提取，再給到視圖即可。

如果我需要結(jié)合elementUI的分頁組件，怎么實現(xiàn)呢？以下是實現(xiàn)方式，做得跟后端給的分頁一樣的效果。

<!--這里的paginatedData就是根據(jù)list進行切割的計算屬性-->
<el-table :data="paginatedData" border style="width: 100%">
	<el-table-column type="index" label="序號" :index="indexMethod" width="60" header-align="center" align="center"> </el-table-column>
        <el-table-column prop="customerName" label="客戶名稱" min-width="130"> </el-table-column>
        <el-table-column prop="chainName" label="業(yè)務名稱" min-width="120"> </el-table-column>
        <el-table-column prop="statisticsPeriod" label="統(tǒng)計周期" min-width="80"> </el-table-column>
        <el-table-column prop="dateCycle" label="時間周期" min-width="150"> </el-table-column>
</el-table>     
<!--這里的pagination分頁組件不需要做任何改動-->
<div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 30, 50]" :page-size="listQuery.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalNum"> </el-pagination>
</div>
<script>
export default {
  data() {
    return {
      list: [] //后端接口給的列表數(shù)據(jù)（未分頁，全部返回）
    }
  },
  created() {
    //請求后端數(shù)據(jù)
    this.getList();
  },
  computed: {
    // 使用前端實現(xiàn)分頁的計算數(shù)據(jù)
    paginatedData() {
      // 分頁的起始下標
      const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;
      // 分頁的末尾下標
      const endIndex = startIndex + this.listQuery.pageNum;
      // 返回切割后的數(shù)據(jù)
      return this.list.slice(startIndex, endIndex);
    },
    // 總條數(shù)
    totalNum() {
      return this.list.length;
    },
    // 總分頁數(shù)
    total() {
      return Math.ceil(this.list.length / this.listQuery.pageNum);
    }
  },
  methods:{
   //數(shù)據(jù)
   getList() {
      //調(diào)用后端接口
      staticsList().then((res) => {
        this.list = res.data;
      });
    },
    // 每頁列表數(shù)
    handleSizeChange(val) {
      this.listQuery.pageNum = val;
    },
    // 當前分頁數(shù)（第幾頁）
    handleCurrentChange(val) {
      this.listQuery.page = val;
    },
  }
}    
</script>
    

這樣就可以實現(xiàn)前端分頁了。

二、通用的前端分頁代碼

如果你的項目中，不是用elementUI框架，其實也很好辦，主要是記住以上前端分頁的思路：找到某一頁的開始下標和結(jié)束下標，然后去分割數(shù)組，返回給視圖。

以下是一個示例代碼：

<template>
  <div>
    <ul v-for="item in paginatedData" :key="item.id">
      <!-- 顯示需要顯示的數(shù)據(jù) -->
        <li>{{item.name}}</li>
    </ul>
    <div>
      <!-- 顯示分頁控件 -->
      <button v-for="pageNumber in totalPages" :key="pageNumber" @click="currentPage = pageNumber">
        {{ pageNumber }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 假如這里就是你通過接口獲取到的所有的數(shù)據(jù)（未分頁）
      itemsPerPage: 10, // 每頁顯示的數(shù)據(jù)量
      currentPage: 1 // 當前頁碼
    };
  },
  computed: {
    paginatedData() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.data.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.data.length / this.itemsPerPage);
    }
  }
};
</script>

在這個示例中，我們使用 v-for 指令來遍歷每一頁要顯示的數(shù)據(jù)，并使用 slice() 方法來獲取當前頁碼對應的數(shù)據(jù)。我們還計算了總頁數(shù)，以便在分頁控件中顯示所有的頁碼。

在模板中，我們使用 v-for 指令來遍歷每一頁要顯示的數(shù)據(jù)，并在分頁控件中使用 v-for 指令來顯示所有的頁碼。我們在每個頁碼按鈕上綁定了一個 click 事件，點擊按鈕時會更新當前頁碼。

如果你在web前端開發(fā)、面試、前端學習路線有困難可以加我V：imqdcnn。免費答疑，行業(yè)深潛多年的技術(shù)牛人幫你解決bug。

祝你能成為一名優(yōu)秀的WEB前端開發(fā)工程師！文章來源地址http://www.zghlxwxcb.cn/news/detail-854093.html

到了這里，關于工作這么久了，還不懂如何使用純前端實現(xiàn)分頁嗎？-假如后端一股腦返回給你所有數(shù)據(jù)，讓你自個實現(xiàn)分頁該怎么辦的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！