快捷導(dǎo)航

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

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

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

html代碼

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

<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ù)

因?yàn)槲沂侨肿裕琩ata是個(gè)返回對象的函數(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是我獲取到后臺數(shù)據(jù)的數(shù)組。

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

您可能感興趣的文章:

相關(guān)文章

vue3集成jsoneditor的方法詳解
JSONEditor是一個(gè)基于Web的工具,用于查看、編輯、格式化和驗(yàn)證JSON,它有各種模式,這篇文章主要為大家介紹了vue3集成jsoneditor的教程,希望對大家有所幫助
2023-09-09
詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例
這篇文章主要介紹了詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
在Vue3中如何更優(yōu)雅的使用echart圖表詳解
ECharts是一個(gè)強(qiáng)大的畫圖插件,在vue項(xiàng)目中,我們常?？梢砸肊charts來完成完成一些圖表的操作,下面這篇文章主要給大家介紹了關(guān)于在Vue3中如何更優(yōu)雅的使用echart圖表的相關(guān)資料,需要的朋友可以參考下
2022-05-05
優(yōu)雅的處理vue項(xiàng)目異常實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的處理vue項(xiàng)目異常的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
axios+vue請求時(shí)攜帶cookie的方法實(shí)例
做項(xiàng)目時(shí)遇到一個(gè)需求,后端需要在接口請求時(shí),對用戶登陸狀態(tài)進(jìn)行判斷,需要在請求時(shí)攜帶Cookie,下面這篇文章主要給大家介紹了關(guān)于axios+vue請求時(shí)攜帶cookie的相關(guān)資料,需要的朋友可以參考下
2022-09-09
詳解Vue-Router的安裝與使用
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。本文介紹下Vue Router的安裝與使用
2021-06-06
vue keep-alive中的生命周期解讀
這篇文章主要介紹了vue keep-alive中的生命周期,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue中keep-alive的兩種應(yīng)用方式
這篇文章主要介紹了Vue中keep-alive的兩種應(yīng)用方式，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
Vue中如何使用mock模擬數(shù)據(jù)
這篇文章主要介紹了Vue中如何使用mock模擬數(shù)據(jù)，具有很好的價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
用vue設(shè)計(jì)一個(gè)日歷表
這篇文章主要介紹了如何用vue設(shè)計(jì)一個(gè)日歷表，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
2020-12-12