快捷導(dǎo)航

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

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

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

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

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

這里就直接上代碼了

<el-card>
  <!-- 用戶列表區(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)限名稱" prop="authName"></el-table-column>
  </el-table>

  <!--分頁區(qū)域-->
  <el-pagination
      @size-change="size_change" //pageSize 改變時(shí)會(huì)觸發(fā)
      @current-change="current_change"  //currentPage 改變時(shí)會(huì)觸發(fā)
      :current-page="currentPage"  //當(dāng)前頁數(shù)
      :page-sizes="[10,20,30]"   //每頁顯示個(gè)數(shù)選擇器的選項(xiàng)設(shè)置
      :page-size="pagesize"  //每頁顯示條目個(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,//每頁顯示條目個(gè)數(shù)
        currentPage:1,//當(dāng)前頁數(shù)
    }
},

監(jiān)聽改變事件

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

效果如圖

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

您可能感興趣的文章:

相關(guān)文章

vue如何通過id從列表頁跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁
這篇文章主要介紹了vue如何通過id從列表頁跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁 ,需要的朋友可以參考下
2018-05-05
vue項(xiàng)目中各文件的使用說明
這篇文章主要介紹了vue項(xiàng)目中各文件的使用說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
為什么Vue3.0使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(defineProperty表示不背這個(gè)鍋)
這篇文章主要介紹了為什么Vue3.0使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽？defineProperty表示不背這個(gè)鍋，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法
2017-03-03
Vue組件通信$attrs、$listeners實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue組件通信$attrs、$listeners實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)
最近在使用Element開發(fā)時(shí)遇到了不少問題,下面這篇文章主要給大家介紹了關(guān)于Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級(jí)結(jié)構(gòu)與用法的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Vue tagsview實(shí)現(xiàn)多頁簽導(dǎo)航功能流程詳解
基本上后臺(tái)管理系統(tǒng)都需要有多頁簽的功能，但是因?yàn)橐恍┠_手架項(xiàng)目基本都把這個(gè)功能給集成好了，導(dǎo)致在學(xué)習(xí)或者修改的時(shí)候不知道該如何下手。今天這篇文章就來聊一聊，vue-element-admin項(xiàng)目是如何實(shí)現(xiàn)多頁簽功能的
2022-09-09
vue2 el-table行懸停時(shí)彈出提示信息el-popover的實(shí)現(xiàn)
本文主要介紹了vue2 el-table行懸停時(shí)彈出提示信息el-popover的實(shí)現(xiàn),用到了cell-mouse-enter、cell-mouse-leave兩個(gè)事件,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
vue前后端端口不一致的問題解決
本文主要介紹了vue前后端端口不一致的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-10-10
vue實(shí)現(xiàn)表格增刪改查效果的實(shí)例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)增刪改查效果的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07