ant?design?vue的table取消自帶分頁問題
ant design vue的table取消自帶分頁
在我們使用ant design vue的table組件的時候會發(fā)現(xiàn)：
組件使用如示：
<a-table :columns="columns" :data-source="data" bordered></a-table>
顯然并沒有配置pagination屬性，那為什么會出現(xiàn)分頁器呢？
這是因為：
組件默認(rèn)開啟了分頁，你不但可以通過 pagination 配置顯示或隱藏，還可以配置顯示位置。
如果需要，還可以同時配置上下同時顯示分頁。
組件自帶分頁功能，并默認(rèn)開啟。
那我們有時候數(shù)據(jù)量不大，根本不想有分頁器的存在該怎樣把它取消呢？
在使用table組件的時候，配置:pagination="false" 即可。
效果如下：
注意是：:pagination=“false” 噢?。?！
題外話：
其實(shí)，我們最該細(xì)細(xì)研讀官方文檔。
使用組件的時候遇到問題，我們首先要去看文檔內(nèi)相關(guān)配置項的介紹。
再根據(jù)配置項的默認(rèn)值和數(shù)據(jù)類型，就能處理大部分遇到的問題
就像我記錄的這些問題，一方面是給遇到同樣問題的小伙伴提供一個解決方案，另一方面也是給自己一個警醒，避免下次再出現(xiàn)同樣的問題。
通過我多次遇到的問題，發(fā)現(xiàn)解決問題在于思路的選?。?/strong>
- 組件：官方文檔—>配置項介紹—>默認(rèn)值 / 數(shù)據(jù)類型
- 報錯：錯誤位置—>報錯內(nèi)容—>官方組件使用問題 / 自定義組件注冊問題 / 配置項 / 數(shù)據(jù)類型
ant design vue table分頁
ant design vue table分頁設(shè)置
1、設(shè)置pagination
<a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" :pagination="pagination">
<a slot="action" href="javascript:;" rel="external nofollow" >查看</a>
<img style="width:20px;heigth:20px" slot="pic" slot-scope="text" :src=text />
</a-table>2、自定義pagination，注意寫成onChange,change不行，灰色部分請根據(jù)自己實(shí)際代碼修改。
data () {
let self = this
return {
collapsed: false,
data,
sels,
columns,
rowSelection,
pagination: {
pageNo: 1,
pageSize: 20, // 默認(rèn)每頁顯示數(shù)量
showSizeChanger: true, // 顯示可改變每頁數(shù)量
pageSizeOptions: ['10', '20', '50', '100'], // 每頁數(shù)量選項
showTotal: total => `共 ${total} 條`, // 顯示總數(shù)
onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改變每頁數(shù)量時更新顯示
onChange:(page,pageSize)=>this.onPageChange(page,pageSize),//點(diǎn)擊頁碼事件
total:0 //總條數(shù)
}
}
},
methods: {
onPageChange(page, pageSize) {
this.pagination.pageNo = page
this.getList()
},
onSizeChange(current, pageSize) {
this.pagination.pageNo = 1
this.pagination.pageSize = pageSize
this.getList()
}
}3、Ajax讀取數(shù)據(jù)列表時，pagination.total賦總條數(shù)即可
.then((response) => {
this.data = response.data.items
this.pagination.total=response.data.totalNum
console.log(response)
})4.讀取數(shù)據(jù)時帶上當(dāng)前頁、分頁大小，過濾條件，后端代碼可以簡單使用通用分頁方法返回Json數(shù)據(jù)即可
getList () {
let filter= {xxx:this.queryParam.xxx,curPage:this.pagination.pageNo,pageSize:this.pagination.pageSize};// 請求參數(shù)
console.log(filter)
this.getData(filter)
},以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue 將頁面公用的頭部組件化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
X6 是 AntV 旗下的圖編輯引擎，提供了一系列開箱即用的交互組件和簡單易用的節(jié)點(diǎn)定制能力，方便我們快速搭建流程圖、DAG 圖、ER 圖等圖應(yīng)用。接下來就看看vue如何使用它2021-05-05
Nginx部署Vue.js前端項目的實(shí)現(xiàn)
本文主要介紹了Nginx部署Vue.js前端項目指南,幫助您實(shí)現(xiàn)從開發(fā)到線上部署的平滑過渡,確保用戶能夠獲得最佳的訪問體驗,感興趣的可以了解一下2024-09-09
本文通過圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
這篇文章主要介紹了vue中的slot封裝組件彈窗，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue封裝DateRangePicker組件流程詳細(xì)介紹
在后端管理項目中使用vue來進(jìn)行前端項目的開發(fā)，但我們都知道Vue實(shí)際上無法監(jiān)聽由第三方插件所引起的數(shù)據(jù)變化。也無法獲得JQuery這樣的js框架對元素值的修改的。而日期控件daterangepicker又基于JQuery來實(shí)現(xiàn)的2022-11-11
JSX是一種Javascript的語法擴(kuò)展,JSX = Javascript + XML,即在 Javascript里面寫XML,因為 JSX 的這個特性,所以他即具備了 Javascript的靈活性,同時又兼具h(yuǎn)tml的語義化和直觀性,這篇文章主要給大家介紹了關(guān)于Vue中JSX的基本用法及高級部分的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue+golang實(shí)現(xiàn)上傳微信頭像功能
這篇文章主要介紹了vue+golang實(shí)現(xiàn)上傳微信頭像功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了vue3如何實(shí)現(xiàn)單點(diǎn)登錄問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了關(guān)于vue中媒體查詢不起效的原因總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09