快捷導(dǎo)航

vue+Element實(shí)現(xiàn)分頁(yè)效果

更新時(shí)間：2021年09月27日 09:07:25 作者：Hgiao

這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+Element實(shí)現(xiàn)分頁(yè)效果的具體代碼，供大家參考，具體內(nèi)容如下

一般樣式都是card里面包含列表和分頁(yè)

這里就直接上代碼了

<el-card>
  <!-- 用戶(hù)列表區(qū)域 -->
  <el-table :data="rightsList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe>
    <el-table-column  label="#" type="index"></el-table-column>
    <el-table-column label="權(quán)限名稱(chēng)" prop="authName"></el-table-column>
  </el-table>

  <!--分頁(yè)區(qū)域-->
  <el-pagination
      @size-change="size_change" //pageSize 改變時(shí)會(huì)觸發(fā)
      @current-change="current_change"  //currentPage 改變時(shí)會(huì)觸發(fā)
      :current-page="currentPage"  //當(dāng)前頁(yè)數(shù)
      :page-sizes="[10,20,30]"   //每頁(yè)顯示個(gè)數(shù)選擇器的選項(xiàng)設(shè)置
      :page-size="pagesize"  //每頁(yè)顯示條目個(gè)數(shù)
      layout="total, sizes, prev, pager, next, jumper"  //組件布局
      :total="rightsList.length   //總條目數(shù)
      "> 
  </el-pagination>
</el-card>

然后定義一下數(shù)據(jù)

data() {
   return {
        rightsList:[], //列表數(shù)據(jù)
        
        total:0,//總條目數(shù)
        pagesize:10,//每頁(yè)顯示條目個(gè)數(shù)
        currentPage:1,//當(dāng)前頁(yè)數(shù)
    }
},

監(jiān)聽(tīng)改變事件

methods:{
   //監(jiān)聽(tīng) pagesize 改變的事件
   size_change(newSize){
       this.pagesize = newSize
   }
   //監(jiān)聽(tīng) 頁(yè)碼值 改變的事件
   current_change(newPage){
       this.currentPage = newPage
   },
   
}

效果如圖

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue常見(jiàn)路由跳轉(zhuǎn)的幾種方式小結(jié)
本文主要介紹了常見(jiàn)路由跳轉(zhuǎn)的幾種方式，主要介紹了四種常見(jiàn)方式，具有一定的參考價(jià)值，感興趣的可以了解一下
2023-09-09
運(yùn)行npm?run?dev報(bào)錯(cuò)的原因及解決
剛剛創(chuàng)建好vue項(xiàng)目的時(shí)候,運(yùn)行 npm run dev 會(huì)報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于運(yùn)行npm?run?dev報(bào)錯(cuò)的原因及解決方法,需要的朋友可以參考下
2022-10-10
vue-treeselect及el-tree點(diǎn)擊節(jié)點(diǎn)獲取上級(jí)節(jié)點(diǎn)的數(shù)據(jù)方式
這篇文章主要介紹了vue-treeselect及el-tree點(diǎn)擊節(jié)點(diǎn)獲取上級(jí)節(jié)點(diǎn)的數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue + iView實(shí)現(xiàn)Excel上傳功能的完整代碼
前一段時(shí)間項(xiàng)目經(jīng)歷了前端上傳文件的過(guò)程，首先進(jìn)入頁(yè)面會(huì)展示默認(rèn)的樣子，選中要上傳的excel文件，本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2021-06-06
elementui彈窗頁(yè)按鈕重復(fù)提交問(wèn)題解決方法
本文主要介紹了elementui彈窗頁(yè)按鈕重復(fù)提交問(wèn)題解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-08-08
vue構(gòu)建單頁(yè)面應(yīng)用實(shí)戰(zhàn)
本篇文章主要介紹了vue構(gòu)建單頁(yè)面應(yīng)用實(shí)戰(zhàn)，使用 SPA，沒(méi)有頁(yè)面切換，就沒(méi)有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。
2017-04-04
Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹(shù)和選人功能
這篇文章主要介紹了Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹(shù)和選人功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能
這篇文章主要介紹了Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
Vue父子傳遞實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于Vue父子傳遞實(shí)例講解，需要的朋友們可以跟著學(xué)習(xí)參考下。
2020-02-02
vue實(shí)現(xiàn)多個(gè)數(shù)組合并
這篇文章主要介紹了vue實(shí)現(xiàn)多個(gè)數(shù)組合并方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06