Ant Design Vue table組件如何自定義分頁器
Ant Design Vue table組件自定義分頁器
由 Ant Design of Vue 提供的Table表格組件自身是帶有pagination分頁功能的，用于獲取到后臺返回的全部數(shù)據(jù)時很適用。但是項目需求需要用到分頁查詢以及條數(shù)查詢時，就需要我們對代碼做出改變
1.設置pagination屬性為false,取消table組件自帶的分頁效果
<a-table :pagination="false" > </a-table>
2.使用分頁組件,選用合適的屬性
<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)聽條數(shù)的改變
pageSize(val) {
console.log('pageSize', val);
this.pageSize = val
this.current = 1
this.getRtSignByPage()
},
// 監(jiān)聽頁數(shù)的改變
current(val) {
console.log('current', val);
this.current = val
this.getRtSignByPage()
},
},
mounted () {
this.getRtSignByPage()
},
methods: {
// 按條件分頁查詢
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組件，解決點擊任意內容詳情，點擊返回分頁器頁數(shù)默認回到第一頁
問題描述
使用 Ant Design Vue的 Table 組件時，點擊底部分頁器切換頁面，表格信息會重新加載，但是頁面路由還是相同的，這就導致切換頁面之后，點擊某一元素的詳情頁面之后，點擊返回默認回到表格的第一頁，就比如你點擊 頁數(shù)為 3 的一個元素切換到它的詳情頁，點擊返回，表格又回到了頁數(shù) 1，這樣的操作體驗十分不友好
解決方法
巧妙運用 pagination 的 defaultCurrent（默認頁數(shù)屬性），配合使用 onChange方法， 使用 sessionStorage.setItem() 和 sessionStorage.getItem() 來存儲和取出當前頁數(shù) ，
表格代碼
這里的代碼只是測試用例，用于演示
<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, // 默認每頁顯示數(shù)量
defaultCurrent: Number(sessionStorage.getItem('currentPage')) || 1, // 默認當前頁數(shù)
showSizeChanger: true, // 顯示可改變每頁數(shù)量
pageSizeOptions: ['5', '10', '20', '50'], // 每頁數(shù)量選項
showTotal: total => `Total ${total} items`, // 顯示總數(shù)
showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改變每頁數(shù)量時更新顯示
// 改變頁數(shù)時時觸發(fā)函數(shù)
onChange: (current) => {
this.currentPage = current;
}
}
}
},methods中的函數(shù)
點擊進入詳情函數(shù)
// 點擊詳情事件
ClickDetail(){
sessionStorage.setItem('currentPage',this.currentPage)
// 下面是自己的具體的頁面邏輯，即跳轉路由的操作
this.$route.xxxxxx
}可以看到當點擊詳情后，就把當前的 頁面值 currentPage 存入了緩存中，可以仔細看上面自定義 pagination 的一些配置，它從緩存中取出 先前的頁面值 currentPage ，并把它當做默認頁面加載 ，那么現(xiàn)在可以看到這個問題就迎刃而解了
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue源碼之首次渲染過程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標變化功能
這篇文章主要介紹了vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標變化功能,需本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue項目使用axios封裝request請求，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
最近學習在vite項目中配置less,本文主要介紹了Vue3+Vite項目使用less的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-02-02
這篇文章主要介紹了Vue?全部生命周期組件梳理整理，在創(chuàng)建組件之前使用；在實例初始化之后,進行數(shù)據(jù)偵聽和事件，偵聽器的配置之前同步調用2022-06-06
watch就是當值第一次綁定的時候，是不會執(zhí)行監(jiān)聽函數(shù)的，只有值誕生改變才會執(zhí)行。如果需要在第一次綁定的時候也執(zhí)行函數(shù)，則需要用到immediate屬性，比如當父組件向子組件動態(tài)傳值時，子組件props首次獲取到父組件傳來的No認知時，也需要執(zhí)行函數(shù)2023-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)卡片翻轉輪播展示，同時在翻轉時切換數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
安裝@vue/cli 報錯npm WARN deprecated request
這篇文章主要介紹了安裝@vue/cli 報錯npm WARN deprecated request@2.88.2問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue?瀏覽器本地存儲,LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage，存儲大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內容介紹跟隨小編一起看看吧2022-04-04
這篇文章主要為大家介紹了Vue的過度與動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11