文章目錄

• • vue分頁功能實現
  • • 一、直接上代碼
    • 二、需要注意的事項

vue分頁功能實現

一、直接上代碼

// 列表結構 // 重點：data="pageList" <el-table:data="pageList":cell-style="fileNameStyle"tooltip-effect="dark"style="width: 100%" > </el-table>// 分頁結構 // handleSizeChange: 每頁的條數切換方法 // current_change: 當前是第幾頁方法 // *重點：currentChangePage 分頁方法(js代碼里) <el-pagination@size-change="handleSizeChange"@current-change="current_change":current-page="currentPage1":page-size="pageSize"layout="prev, pager, next":total="total"> </el-pagination> data() {return {tableListData: [], // 列表數據pageList: [], // 分頁列表數據pageSize: 1, // 每頁多少條currentPage1: 1, // 當前頁total: 0, // 總數據條數} },methods: {// 根據項目id查詢全部列表數據async getListAll () {const { data: res } = await this.$http.post('/model/listModelFile', {id: this.parentId})if (res.code !== 0) {return this.$message.error('獲取列表數據失敗！')}// console.log(res)this.tableListData = res.data.listthis.currentChangePage(this.tableListData, 1)// this.pageSize = res.data.pageSizethis.currentPage = res.data.currPagethis.total = res.data.totalCount},// 每頁條數切換handleSizeChange (pageSize) {this.pageSize = pageSizethis.current_change(this.currentPage1)},// 當前是第幾頁current_change (currentPage) {console.log('當前頁改變時', currentPage)this.currentPage1 = currentPagethis.currentChangePage(this.tableListData, currentPage)},// 分頁方法(重點)currentChangePage (list, currentPage) {console.log('list', list)let from = (currentPage - 1) * this.pageSizelet to = currentPage * this.pageSizethis.pageList = []for (; from < to; from++) {if (list[from]) {this.pageList.push(list[from])}}}, }

二、需要注意的事項

帶分頁后，列表的數據源是分頁處理后的數據源，不是所有的數據；

總結

以上是生活随笔為你收集整理的【vue分页功能】vue element 分页组件简简单单实现分页功能详细教学的全部內容，希望文章能夠幫你解決所遇到的問題。

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