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

更新時(shí)間：2018年03月02日 10:03:01 作者：李小斌96

下面小編就為大家分享一篇利用vue和element-ui設(shè)置表格內(nèi)容分頁的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

html代碼

因?yàn)槲覍懺趖emplate中，也就是新建了組建中，貼出代碼。

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

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

layout代表組件布局，子組件名用逗號(hào)分隔

屬性： 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(){
  //加載班級(jí)的數(shù)據(jù)
   var url ='http://127.0.0.1:3000/clazz/findAll';
   //向后臺(tái)獲取數(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是在后臺(tái)express搭建起來的腳手架所設(shè)置好的路由。

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

因?yàn)槲沂侨肿?cè)，data是個(gè)返回對(duì)象的函數(shù)

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

前端虛擬滾動(dòng)列表實(shí)現(xiàn)代碼(vue虛擬列表)
前端的性能瓶頸那就是頁面的卡頓,當(dāng)然這種頁面的卡頓包含了多種原因,下面這篇文章主要給大家介紹了關(guān)于前端虛擬滾動(dòng)列表實(shí)現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
如何在Vue 3中擴(kuò)展Vue Router鏈接詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴(kuò)展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下
2021-06-06
vue 虛擬DOM的原理
這篇文章主要介紹了vue 虛擬DOM的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
2020-10-10
解決Antd Table表頭加Icon和氣泡提示的坑
這篇文章主要介紹了解決Antd Table表頭加Icon和氣泡提示的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue2實(shí)現(xiàn)圖片的拖拽,縮放和旋轉(zhuǎn)效果的示例代碼
這篇文章主要為大家介紹了如何基于vue2?實(shí)現(xiàn)圖片的拖拽、旋轉(zhuǎn)、鼠標(biāo)滾動(dòng)放大縮小等功能。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以嘗試一下
2022-11-11
vue中el-upload上傳圖片到七牛的示例代碼
這篇文章主要介紹了vue中el-upload上傳圖片到七牛的示例代碼,實(shí)現(xiàn)思路其實(shí)也很簡單，需要從后臺(tái)獲取七牛token上傳圖片到七牛，具體示例代碼大家跟隨小編一起學(xué)習(xí)吧
2018-10-10
vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果
這篇文章主要介紹了vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-05-05
vuex中的四個(gè)map方法的使用小結(jié)
vuex里面有四個(gè)map方法，他們分別可以針對(duì)不同的元素進(jìn)行不同的代碼生成，本文就來詳細(xì)的介紹一下vuex中的四個(gè)map方法，具有一定的參考價(jià)值，感興趣的可以了解一下
2023-05-05
Vue-cli搭建spa項(xiàng)目的項(xiàng)目實(shí)踐
本文主要介紹了Vue-cli搭建spa項(xiàng)目的項(xiàng)目實(shí)踐,首先,你需要安裝Vue CLI,然后通過它創(chuàng)建新項(xiàng)目,接著,選擇和配置適當(dāng)?shù)牟寮鸵蕾図?xiàng),以完善你的SPA項(xiàng)目,感興趣的可以了解一下
2023-09-09
Vue中使用import進(jìn)行路由懶加載的原理分析
這篇文章主要介紹了Vue中使用import進(jìn)行路由懶加載的原理分析。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04