Vue2.0+ElementUI實現表格翻頁的實例
ElementUI的表格要求的數據類型為字典數組。我使用了python3寫后端，那么從數據庫取數據時添加一行cursorclass=pymysql.cursors.DictCursor即可。取出后我將其存入redis數據庫方便之后取用。取用時使用eval()函數再傳到前端即可。
前端放置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ā)生改變時的相應函數，handleCurrentChange為currentPage發(fā)生改變時的相應函數。
page-sizes為所有可選擇的page-size?？梢宰约焊钠渲械臄底帧?/p>
layout為附帶的功能，一般不用動它。
total為總數據數。由于是字典數組，直接使用length方法即可得到總數據數。
data () {
return {
data: [],
currentPage:1,
pagesize:20,
}
},
初始頁currentPage、初始每頁數據數pagesize和數據data
methods: {
handleSizeChange: function (size) {
this.pagesize = size;
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
}
}
上面的兩個響應函數，很好理解。
<el-table :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe style="width: 100%">
el-table標簽。通過計算很容易得到，要使當頁顯示分頁后的對應數據，其下標應為(當前頁-1)*每頁數據數 到 當前頁*每頁數據數。使用slice方法進行取用。
stripe為帶斑馬紋表格。
<el-table-column prop="id" label="序號" align="center"> </el-table-column>
column標簽?？煞哦鄠€，對每列的控制。label為該列名稱，顯示在第一行。prop為data中的某key的名稱。
最后成果。
以上這篇Vue2.0+ElementUI實現表格翻頁的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
JavaScript中clientWidth,offsetWidth,scrollWidth的區(qū)別
這篇文章主要介紹了Element中clientWidth,offsetWidth,scrollWidth的區(qū)別，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家詳細介紹了js結合html制作簡單驗證碼的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了javascript實現的上下無縫滾動效果,具有無縫滾動及響應鼠標滑過停止?jié)L動的功能,簡便實用,需要的朋友可以參考下2016-09-09
javascript瀑布流式圖片懶加載實例解析與優(yōu)化
這篇文章主要針對javascript瀑布流式圖片懶加載實例進行解析與優(yōu)化，感興趣的小伙伴們可以參考一下2016-02-02
小發(fā)現之淺談location.search與location.hash的問題
下面小編就為大家?guī)硪黄“l(fā)現之淺談location.search與location.hash的問題。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
如何判斷對象是否為空是我們在開發(fā)過程中經常遇到的問題,今天我們將討論幾種常用的方法,以及如何在不同的場景中使用它們,接下來、一起看看吧,對你肯定有幫助2024-01-01
input+select(multiple) 實現下拉框輸入值
昨天做一個網站時，需要實現下拉框能夠輸入，從功能上講是要實現用戶在文本框輸入值時，能夠從后讀出數據彈出下拉選項2009-05-05
不得不分享的JavaScript常用方法函數集，幫助大家更好的學習javascript程序設計，有興趣的朋友可以參考一下2015-12-12
JavaScript中的this指向綁定規(guī)則及常見面試總結
這篇文章主要為大家介紹了JavaScript中的this指向綁定規(guī)則及箭頭韓碩中的this指向,還b包含了常見面試總結,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
Three光源Target位置改變光照方向不變的問題解決方法
這篇文章主要為大家介紹了Three光源Target位置改變光照方向不變的問題及解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-12-12