欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年03月02日 10:03:01   作者：李小斌96  
下面小編就為大家分享一篇利用vue和element-ui設(shè)置表格內(nèi)容分頁的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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)" style="width: 100%">

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

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

相關(guān)文章

  • vue3集成jsoneditor的方法詳解

    vue3集成jsoneditor的方法詳解

    JSONEditor是一個基于Web的工具,用于查看、編輯、格式化和驗證JSON,它有各種模式,這篇文章主要為大家介紹了vue3集成jsoneditor的教程,希望對大家有所幫助
    2023-09-09
  • 詳解vue實現(xiàn)坐標拾取器功能示例

    詳解vue實現(xiàn)坐標拾取器功能示例

    這篇文章主要介紹了詳解vue實現(xiàn)坐標拾取器功能示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • 在Vue3中如何更優(yōu)雅的使用echart圖表詳解

    在Vue3中如何更優(yōu)雅的使用echart圖表詳解

    ECharts是一個強大的畫圖插件,在vue項目中,我們常常可以引用Echarts來完成完成一些圖表的操作,下面這篇文章主要給大家介紹了關(guān)于在Vue3中如何更優(yōu)雅的使用echart圖表的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • 優(yōu)雅的處理vue項目異常實戰(zhàn)記錄

    優(yōu)雅的處理vue項目異常實戰(zhàn)記錄

    這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的處理vue項目異常的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • axios+vue請求時攜帶cookie的方法實例

    axios+vue請求時攜帶cookie的方法實例

    做項目時遇到一個需求,后端需要在接口請求時,對用戶登陸狀態(tài)進行判斷,需要在請求時攜帶Cookie,下面這篇文章主要給大家介紹了關(guān)于axios+vue請求時攜帶cookie的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • 詳解Vue-Router的安裝與使用

    詳解Vue-Router的安裝與使用

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。本文介紹下Vue Router的安裝與使用
    2021-06-06
  • vue keep-alive中的生命周期解讀

    vue keep-alive中的生命周期解讀

    這篇文章主要介紹了vue keep-alive中的生命周期,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue中keep-alive的兩種應(yīng)用方式

    Vue中keep-alive的兩種應(yīng)用方式

    這篇文章主要介紹了Vue中keep-alive的兩種應(yīng)用方式，文中講解非常細致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
    2020-07-07
  • Vue中如何使用mock模擬數(shù)據(jù)

    Vue中如何使用mock模擬數(shù)據(jù)

    這篇文章主要介紹了Vue中如何使用mock模擬數(shù)據(jù)，具有很好的價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • 用vue設(shè)計一個日歷表

    用vue設(shè)計一個日歷表

    這篇文章主要介紹了如何用vue設(shè)計一個日歷表，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
    2020-12-12

最新評論