您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)Vue2.0+ElementUI如何實現(xiàn)表格翻頁的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
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 >
el-table標簽。通過計算很容易得到,要使當頁顯示分頁后的對應(yīng)數(shù)據(jù),其下標應(yīng)為(當前頁-1)*每頁數(shù)據(jù)數(shù) 到 當前頁*每頁數(shù)據(jù)數(shù)。使用slice方法進行取用。
stripe為帶斑馬紋表格。
<el-table-column prop="id" label="序號" align="center"> </el-table-column>
column標簽??煞哦鄠€,對每列的控制。label為該列名稱,顯示在第一行。prop為data中的某key的名稱。
最后成果。
感謝各位的閱讀!關(guān)于“Vue2.0+ElementUI如何實現(xiàn)表格翻頁”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。