溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

利用vue和element-ui設(shè)置表格內(nèi)容分頁的實例

發(fā)布時間：2020-10-20 13:23:10 來源：腳本之家 閱讀：232 作者：李小斌96 欄目：web開發(fā)

html代碼

因為我寫在template中，也就是新建了組建中，貼出代碼。

<el-pagination 
 small
 layout="prev, pager, next"
 :total="total" 
 @current-change="current_change">
</el-pagination>

代碼中，small代表是否使用小型分頁樣式

layout代表組件布局，子組件名用逗號分隔

屬性： total代表總條目數(shù)

事件： current-change用于監(jiān)聽頁數(shù)改變，而內(nèi)容也發(fā)生改變

其他屬性可參見element官方API

http://element.eleme.io/#/zh-CN/component/pagination

監(jiān)聽方法,寫在methods中

methods:{
 created:function(){
  //加載班級的數(shù)據(jù)
   var url ='http://127.0.0.1:3000/clazz/findAll';
   //向后臺獲取數(shù)據(jù)
   var vm = this;
   $.getJSON(url,function(data){
    vm.clazzInfo = data;
    vm.total = data.length;//設(shè)置數(shù)據(jù)總數(shù)目！！！
   }); 
  },
 current_change:function(currentPage){
    this.currentPage = currentPage;
  }
}

其中url是在后臺express搭建起來的腳手架所設(shè)置好的路由。

在data中注冊使用的數(shù)據(jù)

因為我是全局注冊，data是個返回對象的函數(shù)

data:function(){
   return {
    total:0,//默認數(shù)據(jù)總數(shù)
    pagesize:7,//每頁的數(shù)據(jù)條數(shù)
    currentPage:1,//默認開始頁面
   }
  }

將數(shù)據(jù)綁定到tbody上

<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" >

其中searchInfo是我獲取到后臺數(shù)據(jù)的數(shù)組。

以上這篇利用vue和element-ui設(shè)置表格內(nèi)容分頁的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手