通過Element ui往頁面上加一個(gè)分頁導(dǎo)航條的方法
需求
加入一個(gè)分頁條，此分頁條可以跳轉(zhuǎn)頁面，可以根據(jù)頁碼選擇具體頁面，可以設(shè)置當(dāng)前頁面的大小。
在element ui官網(wǎng)選擇Pagination分頁組件
進(jìn)入element ui官網(wǎng)，然后選擇一個(gè)合適的分頁組件，如下圖：
UserList.vue組件的template模板中的分頁組件的代碼和效果
分頁組件的代碼如下圖：
分頁組件的效果如下圖：
分頁組件牽涉到的data數(shù)據(jù)和methods方法
分頁組件牽涉到的data數(shù)據(jù)如下圖：
分頁組件牽涉到的methods方法如下圖：
測試
首先進(jìn)入首頁，如下圖：
接著改變頁面大小為2條/頁，如下圖：
選擇第5個(gè)頁碼導(dǎo)航，去第5頁，如下圖：
通過跳轉(zhuǎn)輸入框進(jìn)行頁面跳轉(zhuǎn)，如下圖：
到此這篇關(guān)于通過Element ui往頁面上加一個(gè)分頁導(dǎo)航條的方法的文章就介紹到這了,更多相關(guān)Element分頁導(dǎo)航條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 利用vue + element實(shí)現(xiàn)表格分頁和前端搜索的方法
- Vue+element-ui 實(shí)現(xiàn)表格的分頁功能示例
- Element實(shí)現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作
- vue + element-ui的分頁問題實(shí)現(xiàn)
- element ui分頁多選,翻頁記憶的實(shí)例
- vue+element tabs選項(xiàng)卡分頁效果
- vue+Element-ui實(shí)現(xiàn)分頁效果實(shí)例代碼詳解
- Vue+ElementUI table實(shí)現(xiàn)表格分頁
- vue+Element-ui前端實(shí)現(xiàn)分頁效果
- Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁功能
相關(guān)文章
我們的數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫,不就是以表格的形式存在嗎,所以在界面上顯示、操作,使用表格來處理也是非常合理的,這篇文章給大家介紹Element el-table 表格使用方法,感興趣的朋友一起看看吧2024-03-03
這篇文章說明了如何使用Vue去刷新當(dāng)前頁面的多種方法實(shí)例,有完成的代碼提供參考,希望對(duì)你有所幫助2021-06-06
本篇文章主要介紹了使用vue-cli編寫vue插件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
基于Vue實(shí)例對(duì)象的數(shù)據(jù)選項(xiàng)
下面小編就為大家?guī)硪黄赩ue實(shí)例對(duì)象的數(shù)據(jù)選項(xiàng)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
關(guān)于Vue的?Vuex的4個(gè)輔助函數(shù)
這篇文章主要介紹了關(guān)于Vue的?Vuex的4個(gè)輔助函數(shù),輔助函數(shù)的好處就是幫助我們簡化了獲取store中state、getter、mutation和action,下面我們一起來看看文章具體的舉例說明吧，需要的小伙伴也可以參考一下2021-12-12
Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南
WangEditor是一個(gè)開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁和移動(dòng)應(yīng)用中的內(nèi)容編輯場景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下2024-08-08
vue實(shí)現(xiàn)一個(gè)滾動(dòng)條樣式
滾動(dòng)條能夠給用戶帶來極好的體驗(yàn)效果，今天通過本文給大家分享vue實(shí)現(xiàn)一個(gè)滾動(dòng)條樣式，代碼簡單易懂，需要的朋友參考下吧2021-07-07
elementui中el-input回車搜索實(shí)現(xiàn)示例
這篇文章主要介紹了elementui中el-input回車搜索實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開網(wǎng)頁
最近在搭建自己的博客,前端采用Vue技術(shù),發(fā)現(xiàn)首頁加載速度非常之慢,常常達(dá)到10S左右,遂開始優(yōu)化之旅,這篇文章主要給大家介紹了關(guān)于vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開網(wǎng)頁的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue-cli使用stimulsoft.reports.js的詳細(xì)教程
Stimulsoft?Reports.JS是一個(gè)使用JavaScript和HTML5生成報(bào)表的平臺(tái)。它擁有所有擁來設(shè)計(jì)，編輯和查看報(bào)表的必需組件。該報(bào)表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧2021-12-12