背景介紹
創(chuàng)新互聯(lián)專注于宣漢網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供宣漢營銷型網(wǎng)站建設(shè),宣漢網(wǎng)站制作、宣漢網(wǎng)頁設(shè)計(jì)、宣漢網(wǎng)站官網(wǎng)定制、微信小程序服務(wù),打造宣漢網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供宣漢網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。最近比較空閑,公司的后臺(tái)就想著把現(xiàn)在的后臺(tái)管理系統(tǒng)給改版一下,說是以前的太難看了,用著也不好用,然后給我甩過來一個(gè)ant-design-pro的鏈接,說是他看這個(gè)就挺不錯(cuò)的。
我當(dāng)時(shí)心里就想著,之前的那個(gè)項(xiàng)目混合在你們的java項(xiàng)目里,跟普通的jsp頁面差不多,一下就是一大堆的css和js文件,看著我都害怕(好吧,我承認(rèn)其實(shí)我都不敢看),這能加載的快了就奇了怪了。ant-design最初是為react設(shè)計(jì)的,ant-design-pro自然也是用react了,不得不說人家這個(gè)界面看著確實(shí)舒服。
對(duì)著ant-design-pro的官方文檔看了一通,貌似看了跟沒看也差不多???算了,還是直接看代碼吧,整理了一下思路,大致上是看懂了,除了react + react-router外,狀態(tài)管理用的是 dva, redux的異步問題算是解決了,要不就開始直接寫頁面吧?
等等,我好像漏掉了點(diǎn)什么?噢,對(duì),先看看打包出來的文件大小,一打包我的心就涼了,大的js居然有900多k,ant-design的源文件是真的大。react我還只是能寫出代碼,打包優(yōu)化這個(gè)可就有點(diǎn)為難我了。這時(shí)的我再想到公司那1m的帶寬,還有這幾個(gè)后臺(tái)的技術(shù)能力,要不然這個(gè)技術(shù)棧我還是放棄吧?不能指望連 請(qǐng)求頭, CORS稍微高級(jí)一點(diǎn)的攜帶cookie, nginx靜態(tài)服務(wù)器 都搞不懂的人去給我弄個(gè)靜態(tài)服務(wù)器,再順便開啟一下gzip吧?算了算了,找找有沒有vue + element-ui的后臺(tái)模板,不用太費(fèi)勁就找到了 vue-element-admin 。
vue-element-admin用著還行,就是界面不太符合我的理想情況,就對(duì)著ant-design-pro改造了一點(diǎn),列表頁大概就是下面這樣了。列表的數(shù)據(jù)是要分頁的,普通的列表頁只有一個(gè)頁面棧,也就是用戶點(diǎn)擊地址欄的回退地址欄時(shí),會(huì)返回上一個(gè)頁面棧,而不是上一頁的數(shù)據(jù),不太符合用戶習(xí)慣吧?畢竟傳統(tǒng)的網(wǎng)站都是可以回退到上一頁的,嗯,話不多說,進(jìn)入正題吧。
第一步:改變地址欄
假設(shè)列表頁的路徑是 /user/list,分頁相關(guān)的參數(shù)為 { page: 1, pagesize: 10 }
,從其他頁面跳轉(zhuǎn)過來的時(shí)候,我們的路徑通常是不包含任何參數(shù)的,之后的列表數(shù)據(jù)都是根據(jù)該頁面的page和pagesize進(jìn)行變化的,當(dāng)未使用keep-alive緩存組件時(shí),每次進(jìn)入列表頁都相當(dāng)于第一次進(jìn)入,也就是說每次都只能獲取第一頁的數(shù)據(jù)。
既然列表數(shù)據(jù)是用page和pagesize進(jìn)行變化的,那直接從地址欄獲取page和pagesize進(jìn)行賦值不就好了?那么是改變地址欄的代碼是直接寫在當(dāng)前頁面還是 獨(dú)立為分頁組件 呢?從復(fù)用性方面來說,還是獨(dú)立出來的好,畢竟其他頁面可能也會(huì)使用到,總不能每次都復(fù)制粘貼吧,那組件化的意義何在?當(dāng)然了,也不是說分頁就必須用這個(gè)自定義的分頁組件,只推薦在 主頁面(非遮罩層 ,有的頁面會(huì)在點(diǎn)擊某一行數(shù)據(jù)時(shí)出現(xiàn)遮罩層顯示子列表,此時(shí)使用element-ui的分頁組件即可)需要分頁時(shí)使用。
當(dāng)改變地址欄的時(shí)候,我們是不希望不帶分頁參數(shù)的頁面棧存在的,此時(shí)用replace直接替換即可。
MyPagination.vue的初始結(jié)構(gòu)為:
<template> <div class = " flex all-center"> <template v-if="total > 0"> <el-pagination :page-size="pagesize" :total="total" :current-page="page" background layout="prev, pager, next, jumper, total" class="my-pagination" @current-change="changePage" /> </template> </div> </template> <script> export default { name: 'MyPagination', props: { total: { type: Number, default: 0, }, page: { type: Number, default: 1, }, pagesize: { type: Number, default: 10, }, totalPages: { type: Number, default: 1, }, }, created() { this.getCurrentPage(); }, methods: { changePage(val) { this.handlePage('push', val, this.pagesize); this.$emit('change', val, this.pagesize); }, getCurrentPage() { var { page, pagesize } = this.$route.query; if (!page || !pagesize) { this.handlePage('replace', page || 1, +pagesize || this.pagesize); return true; } return false; }, handlePage(type, page, pagesize) { this.$router[type]({ path: this.$route.path, query: { ...this.$route.query, page, pagesize }, }); } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .my-pagination { padding-top: 24px; } </style>
網(wǎng)頁標(biāo)題:vue+element-ui的分頁問題實(shí)現(xiàn)-創(chuàng)新互聯(lián)
文章起源:http://m.newbst.com/article4/dchhie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計(jì)公司、商城網(wǎng)站、關(guān)鍵詞優(yōu)化、面包屑導(dǎo)航、全網(wǎng)營銷推廣、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容