Ant Design Vue table組件如何自定義分頁(yè)器
Ant Design Vue table組件自定義分頁(yè)器
由 Ant Design of Vue 提供的Table表格組件自身是帶有pagination分頁(yè)功能的,用于獲取到后臺(tái)返回的全部數(shù)據(jù)時(shí)很適用。但是項(xiàng)目需求需要用到分頁(yè)查詢(xún)以及條數(shù)查詢(xún)時(shí),就需要我們對(duì)代碼做出改變
1.設(shè)置pagination屬性為false,取消table組件自帶的分頁(yè)效果
<a-table :pagination="false" > </a-table>
2.使用分頁(yè)組件,選用合適的屬性
<a-pagination v-model="current" show-size-changer :page-size.sync="pageSize" :total="total" :show-total="total => `總數(shù) ${total} 條`" />
data () { return { total:0, pageSize: 10, current: 1 }, watch: { // 監(jiān)聽(tīng)條數(shù)的改變 pageSize(val) { console.log('pageSize', val); this.pageSize = val this.current = 1 this.getRtSignByPage() }, // 監(jiān)聽(tīng)頁(yè)數(shù)的改變 current(val) { console.log('current', val); this.current = val this.getRtSignByPage() }, }, mounted () { this.getRtSignByPage() }, methods: { // 按條件分頁(yè)查詢(xún) async getRtSignByPage () { let { data } = await getMenuPages({ current:this.current, size:this.pageSize }) this.data = data.data.records this.total = data.data.total } }
使用Ant Design Vue的Table組件,解決點(diǎn)擊任意內(nèi)容詳情,點(diǎn)擊返回分頁(yè)器頁(yè)數(shù)默認(rèn)回到第一頁(yè)
問(wèn)題描述
使用 Ant Design Vue的 Table 組件時(shí),點(diǎn)擊底部分頁(yè)器切換頁(yè)面,表格信息會(huì)重新加載,但是頁(yè)面路由還是相同的,這就導(dǎo)致切換頁(yè)面之后,點(diǎn)擊某一元素的詳情頁(yè)面之后,點(diǎn)擊返回默認(rèn)回到表格的第一頁(yè),就比如你點(diǎn)擊 頁(yè)數(shù)為 3 的一個(gè)元素切換到它的詳情頁(yè),點(diǎn)擊返回,表格又回到了頁(yè)數(shù) 1,這樣的操作體驗(yàn)十分不友好
解決方法
巧妙運(yùn)用 pagination 的 defaultCurrent(默認(rèn)頁(yè)數(shù)屬性),配合使用 onChange方法, 使用 sessionStorage.setItem() 和 sessionStorage.getItem() 來(lái)存儲(chǔ)和取出當(dāng)前頁(yè)數(shù) ,
表格代碼
這里的代碼只是測(cè)試用例,用于演示
<a-table :data-source="data" :columns="columns" :pagination="pagination" > <template slot="address" > <div > <span> <a @click="ClickDetail">詳情</a> </span> </div> </template> </a-table>
自定義的 pagination
data(){ return{ data, columns, currentPage:Number(sessionStorage.getItem('currentPage')) || 1,, pagination: { pageSize: 5, // 默認(rèn)每頁(yè)顯示數(shù)量 defaultCurrent: Number(sessionStorage.getItem('currentPage')) || 1, // 默認(rèn)當(dāng)前頁(yè)數(shù) showSizeChanger: true, // 顯示可改變每頁(yè)數(shù)量 pageSizeOptions: ['5', '10', '20', '50'], // 每頁(yè)數(shù)量選項(xiàng) showTotal: total => `Total ${total} items`, // 顯示總數(shù) showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改變每頁(yè)數(shù)量時(shí)更新顯示 // 改變頁(yè)數(shù)時(shí)時(shí)觸發(fā)函數(shù) onChange: (current) => { this.currentPage = current; } } } },
methods中的函數(shù)
點(diǎn)擊進(jìn)入詳情函數(shù)
// 點(diǎn)擊詳情事件 ClickDetail(){ sessionStorage.setItem('currentPage',this.currentPage) // 下面是自己的具體的頁(yè)面邏輯,即跳轉(zhuǎn)路由的操作 this.$route.xxxxxx }
可以看到當(dāng)點(diǎn)擊詳情后,就把當(dāng)前的 頁(yè)面值 currentPage 存入了緩存中,可以仔細(xì)看上面自定義 pagination 的一些配置,它從緩存中取出 先前的頁(yè)面值 currentPage ,并把它當(dāng)做默認(rèn)頁(yè)面加載 ,那么現(xiàn)在可以看到這個(gè)問(wèn)題就迎刃而解了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+elementUi 實(shí)現(xiàn)密碼顯示/隱藏+小圖標(biāo)變化功能
這篇文章主要介紹了vue+elementUi 實(shí)現(xiàn)密碼顯示/隱藏+小圖標(biāo)變化功能,需本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01vue項(xiàng)目使用axios封裝request請(qǐng)求的過(guò)程
這篇文章主要介紹了vue項(xiàng)目使用axios封裝request請(qǐng)求,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04Vue3+Vite項(xiàng)目使用less的實(shí)現(xiàn)步驟
最近學(xué)習(xí)在vite項(xiàng)目中配置less,本文主要介紹了Vue3+Vite項(xiàng)目使用less的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示,同時(shí)在翻轉(zhuǎn)時(shí)切換數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01安裝@vue/cli 報(bào)錯(cuò)npm WARN deprecated request
這篇文章主要介紹了安裝@vue/cli 報(bào)錯(cuò)npm WARN deprecated request@2.88.2問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue?瀏覽器本地存儲(chǔ)的問(wèn)題小結(jié)
這篇文章主要介紹了Vue?瀏覽器本地存儲(chǔ),LocalStorage 和 SessionStorage 統(tǒng)稱(chēng)為 WebStorage,存儲(chǔ)大小一般支持5mb左右,但是不同的瀏覽器也有區(qū)別,具體內(nèi)容介紹跟隨小編一起看看吧2022-04-04