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