通過Element ui往頁面上加一個分頁導航條的方法
更新時間：2021年05月07日 09:58:38 作者：殺手不太冷！
這篇文章主要介紹了通過Element ui往頁面上加一個分頁導航條的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
需求
加入一個分頁條，此分頁條可以跳轉(zhuǎn)頁面，可以根據(jù)頁碼選擇具體頁面，可以設置當前頁面的大小。
在element ui官網(wǎng)選擇Pagination分頁組件
進入element ui官網(wǎng)，然后選擇一個合適的分頁組件，如下圖：
UserList.vue組件的template模板中的分頁組件的代碼和效果
分頁組件的代碼如下圖：
分頁組件的效果如下圖：
分頁組件牽涉到的data數(shù)據(jù)和methods方法
分頁組件牽涉到的data數(shù)據(jù)如下圖：
分頁組件牽涉到的methods方法如下圖：
測試
首先進入首頁，如下圖：
接著改變頁面大小為2條/頁，如下圖：
選擇第5個頁碼導航，去第5頁，如下圖：
通過跳轉(zhuǎn)輸入框進行頁面跳轉(zhuǎn)，如下圖：
到此這篇關于通過Element ui往頁面上加一個分頁導航條的方法的文章就介紹到這了,更多相關Element分頁導航條內(nèi)容請搜索腳本之家以前的文章或繼續(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)通用表格分頁功能
相關文章
今天小編就為大家分享一篇vue獲取data數(shù)據(jù)改變前后的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在計算機技術中,指令是由指令集架構(gòu)定義的單個的CPU操作,在更廣泛的意義上,“指令”可以是任何可執(zhí)行程序的元素的表述,例如字節(jié)碼,下面這篇文章主要給大家介紹了關于Vue3指令是如何實現(xiàn)的相關資料,需要的朋友可以參考下2022-01-01
我們都知道跨域是同源策略導致的,域名不同、協(xié)議不同、端口號不同任意一種情況都會導致跨域,這篇文章主要介紹了從Vue到Postman全面驗證API接口跨域問題,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue中的搜索關鍵字實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在業(yè)務系統(tǒng)中,Excel 文件作為一種常用的數(shù)據(jù)存儲和傳輸格式,經(jīng)常需要被處理和展示,這篇文章將講解如何通過 Vue 和 xlsx.js 實現(xiàn) Excel 文件的上傳和預覽功能,需要的朋友可以參考下2025-04-04
Vue3使用Proxy構(gòu)建高效響應式數(shù)據(jù)的示例代碼
在 Vue 3 中,Proxy 主要用于 攔截對象的基本操作,包括 屬性讀取（get）、修改（set）、刪除（deleteProperty） 等,本文給大家介紹了Vue3使用Proxy構(gòu)建高效響應式數(shù)據(jù)的操作教程,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了解決Vue大括號字符換行踩的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關于Vue表格組件Vxe-table使用技巧的相關資料,文中還介紹了VXEtable展示指定行所遇到得問題,對大家學習或者使用Vxe-table具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
最近遇見一個需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關于前端大文件上傳與下載(分片上傳)的詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue 實現(xiàn)模糊檢索并根據(jù)其他字符的首字母順序排列
這篇文章主要介紹了vue 實現(xiàn)模糊檢索，并根據(jù)其他字符的首字母順序排列,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09