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