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