Vue2.0+ElementUI實現(xiàn)表格翻頁的實例
ElementUI的表格要求的數(shù)據(jù)類型為字典數(shù)組。我使用了python3寫后端，那么從數(shù)據(jù)庫取數(shù)據(jù)時添加一行cursorclass=pymysql.cursors.DictCursor即可。取出后我將其存入redis數(shù)據(jù)庫方便之后取用。取用時使用eval()函數(shù)再傳到前端即可。
前端放置Pagination 分頁器，我這里直接采用了完整功能的分頁器。
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="data.length"> </el-pagination>
其中：handleSizeChange為pagesize發(fā)生改變時的相應(yīng)函數(shù)，handleCurrentChange為currentPage發(fā)生改變時的相應(yīng)函數(shù)。
page-sizes為所有可選擇的page-size?？梢宰约焊钠渲械臄?shù)字。
layout為附帶的功能，一般不用動它。
total為總數(shù)據(jù)數(shù)。由于是字典數(shù)組，直接使用length方法即可得到總數(shù)據(jù)數(shù)。
data () {
return {
data: [],
currentPage:1,
pagesize:20,
}
},
初始頁currentPage、初始每頁數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
methods: {
handleSizeChange: function (size) {
this.pagesize = size;
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
}
}
上面的兩個響應(yīng)函數(shù)，很好理解。
<el-table :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe style="width: 100%">
el-table標(biāo)簽。通過計算很容易得到，要使當(dāng)頁顯示分頁后的對應(yīng)數(shù)據(jù)，其下標(biāo)應(yīng)為(當(dāng)前頁-1)*每頁數(shù)據(jù)數(shù) 到 當(dāng)前頁*每頁數(shù)據(jù)數(shù)。使用slice方法進(jìn)行取用。
stripe為帶斑馬紋表格。
<el-table-column prop="id" label="序號" align="center"> </el-table-column>
column標(biāo)簽?？煞哦鄠€，對每列的控制。label為該列名稱，顯示在第一行。prop為data中的某key的名稱。
最后成果。
以上這篇Vue2.0+ElementUI實現(xiàn)表格翻頁的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于JS如何實現(xiàn)給字符加千分符(65，541，694，158)
JS如何實現(xiàn)給字符加千分符，本文給大家?guī)砹嘶趈s實現(xiàn)的代碼，代碼簡單易懂，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
這篇文章主要介紹了JS獲取當(dāng)前時間的實例代碼(昨天、今天、明天) ,需要的朋友可以參考下2018-11-11
制作論壇用到的輸入框~想模仿百度之類的寫一個自動匹配字符2013-06-06
本篇文章主要介紹了JS實現(xiàn)簡易刻度時鐘示例代碼的資料,這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-03-03
通過js獲取上傳的圖片信息（臨時保存路徑，名稱，大?。┤缓笸ㄟ^ajax傳遞給后端的方法
最近有朋友向我請教，使用js獲取上傳圖片的信息然后通過ajax傳遞給后端，怎么實現(xiàn)呢？通過上網(wǎng)搜索大量資料，下面小編把我的解決辦法整理，分享給大家，需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)全選和全不選操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了JavaScript動態(tài)加載重復(fù)綁定問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
javascript, jquery的事件中都存在事件冒泡和事件捕獲的問題，針對這兩個問題，本文給出詳細(xì)的解決方法，需要的朋友不要錯過2014-05-05
在默認(rèn)的餅狀圖里面,圖例legend顏色是黑色的,有時候根據(jù)ui需要,根據(jù)不同的背景色,需要將圖例文字調(diào)成白色或者其他顏色,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖指示器文字顏色設(shè)置不同的相關(guān)資料,需要的朋友可以參考下2022-07-07
今天在瀏覽網(wǎng)頁時無意中發(fā)現(xiàn)了這段JS劫持搜索引擎代碼。劫持搜索引擎正常搜索過來的流量，這是黑帽seo常用的劫持方法。特意解密出來供大家了解其劫持原理。感興趣的朋友一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09