文章目錄

• • vue分頁功能實(shí)現(xiàn)
  • • 一、直接上代碼
    • 二、需要注意的事項(xiàng)

vue分頁功能實(shí)現(xiàn)

一、直接上代碼

// 列表結(jié)構(gòu) // 重點(diǎn)：data="pageList" <el-table:data="pageList":cell-style="fileNameStyle"tooltip-effect="dark"style="width: 100%" > </el-table>// 分頁結(jié)構(gòu) // handleSizeChange: 每頁的條數(shù)切換方法 // current_change: 當(dāng)前是第幾頁方法 // *重點(diǎn)：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: [], // 列表數(shù)據(jù)pageList: [], // 分頁列表數(shù)據(jù)pageSize: 1, // 每頁多少條currentPage1: 1, // 當(dāng)前頁total: 0, // 總數(shù)據(jù)條數(shù)} },methods: {// 根據(jù)項(xiàng)目id查詢?nèi)苛斜頂?shù)據(jù)async getListAll () {const { data: res } = await this.$http.post('/model/listModelFile', {id: this.parentId})if (res.code !== 0) {return this.$message.error('獲取列表數(shù)據(jù)失敗！')}// 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},// 每頁條數(shù)切換handleSizeChange (pageSize) {this.pageSize = pageSizethis.current_change(this.currentPage1)},// 當(dāng)前是第幾頁current_change (currentPage) {console.log('當(dāng)前頁改變時(shí)', currentPage)this.currentPage1 = currentPagethis.currentChangePage(this.tableListData, currentPage)},// 分頁方法(重點(diǎn))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])}}}, }

二、需要注意的事項(xiàng)

帶分頁后，列表的數(shù)據(jù)源是分頁處理后的數(shù)據(jù)源，不是所有的數(shù)據(jù)；

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。