vue實現分頁的兩種方式

（1）方法一：使用slice方法

一次調用后端接口返回所有數據tableData，然后使用tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)使得數據根據頁碼改變

<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%"><el-table-column prop="project_name" label="項目名稱" width="150"></el-table-column><el-table-column prop="project_id" label="項目代碼" width="150"></el-table-column></el-table><el-pagination:current-page.sync="currentPage"@current-change="handlePageChange":page-size="pageSize":page-sizes = "[2, 10, 50, 500]"layout="total, prev, pager, next":total="dataCount"></el-pagination>

（2）方法二：

每次換頁都調用接口，后端每次返回該頁的數據

html部分：

<el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="project_name" label="項目名稱" width="150"></el-table-column><el-table-column prop="project_id" label="項目代碼" width="150"></el-table-column></el-table><el-pagination:current-page.sync="currentPage"@current-change="handlePageChange":page-size="pageSize":page-sizes = "[2, 10, 50, 500]"layout="total, prev, pager, next":total="dataCount"></el-pagination>

js部分：

handlePageChange(pageNum) {this.searchItem.limit = this.pageSize;this.searchItem.page = pageNum;this.currentPageNum = this.searchItem.page;this.search(this.searchItem);},search(argumentObj) {let self = this;const BaseUrl = this.$util.getAjaxUrl('type_8')const url = BaseUrl + '/api/tProjectManagement/getTProjectManagementList'axios.get(url,argumentObj).then(function(response) {if (response.data.status === -1) {self.$message.error({content: response.data.msg})} else {self.tableData = response.data.data.list; self.dataCount = response.data.data.total;self.loadingList = false}}).catch(function(error) {console.log(error);});},

總結

以上是生活随笔為你收集整理的vue实现分页的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。