ant?design?vue的table取消自帶分頁(yè)問(wèn)題
ant design vue的table取消自帶分頁(yè)
在我們使用ant design vue的table組件的時(shí)候會(huì)發(fā)現(xiàn):

組件使用如示:
<a-table :columns="columns" :data-source="data" bordered></a-table>
顯然并沒(méi)有配置pagination屬性,那為什么會(huì)出現(xiàn)分頁(yè)器呢?
這是因?yàn)椋?/p>
組件默認(rèn)開(kāi)啟了分頁(yè),你不但可以通過(guò) pagination 配置顯示或隱藏,還可以配置顯示位置。
如果需要,還可以同時(shí)配置上下同時(shí)顯示分頁(yè)。
組件自帶分頁(yè)功能,并默認(rèn)開(kāi)啟。
那我們有時(shí)候數(shù)據(jù)量不大,根本不想有分頁(yè)器的存在該怎樣把它取消呢?
在使用table組件的時(shí)候,配置:pagination="false" 即可。
效果如下:

注意是::pagination=“false” 噢?。。?/p>
題外話:
其實(shí),我們最該細(xì)細(xì)研讀官方文檔。
使用組件的時(shí)候遇到問(wèn)題,我們首先要去看文檔內(nèi)相關(guān)配置項(xiàng)的介紹。
再根據(jù)配置項(xiàng)的默認(rèn)值和數(shù)據(jù)類型,就能處理大部分遇到的問(wèn)題
就像我記錄的這些問(wèn)題,一方面是給遇到同樣問(wèn)題的小伙伴提供一個(gè)解決方案,另一方面也是給自己一個(gè)警醒,避免下次再出現(xiàn)同樣的問(wèn)題。
通過(guò)我多次遇到的問(wèn)題,發(fā)現(xiàn)解決問(wèn)題在于思路的選?。?/strong>
- 組件:官方文檔—>配置項(xiàng)介紹—>默認(rèn)值 / 數(shù)據(jù)類型
- 報(bào)錯(cuò):錯(cuò)誤位置—>報(bào)錯(cuò)內(nèi)容—>官方組件使用問(wèn)題 / 自定義組件注冊(cè)問(wèn)題 / 配置項(xiàng) / 數(shù)據(jù)類型
ant design vue table分頁(yè)
ant design vue table分頁(yè)設(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,注意寫(xiě)成onChange,change不行,灰色部分請(qǐng)根據(jù)自己實(shí)際代碼修改。

data () {
let self = this
return {
collapsed: false,
data,
sels,
columns,
rowSelection,
pagination: {
pageNo: 1,
pageSize: 20, // 默認(rèn)每頁(yè)顯示數(shù)量
showSizeChanger: true, // 顯示可改變每頁(yè)數(shù)量
pageSizeOptions: ['10', '20', '50', '100'], // 每頁(yè)數(shù)量選項(xiàng)
showTotal: total => `共 ${total} 條`, // 顯示總數(shù)
onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改變每頁(yè)數(shù)量時(shí)更新顯示
onChange:(page,pageSize)=>this.onPageChange(page,pageSize),//點(diǎn)擊頁(yè)碼事件
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ù)列表時(shí),pagination.total賦總條數(shù)即可
.then((response) => {
this.data = response.data.items
this.pagination.total=response.data.totalNum
console.log(response)
})4.讀取數(shù)據(jù)時(shí)帶上當(dāng)前頁(yè)、分頁(yè)大小,過(guò)濾條件,后端代碼可以簡(jiǎn)單使用通用分頁(yè)方法返回Json數(shù)據(jù)即可
getList () {
let filter= {xxx:this.queryParam.xxx,curPage:this.pagination.pageNo,pageSize:this.pagination.pageSize};// 請(qǐng)求參數(shù)
console.log(filter)
this.getData(filter)
},以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Nginx部署Vue.js前端項(xiàng)目的實(shí)現(xiàn)
本文主要介紹了Nginx部署Vue.js前端項(xiàng)目指南,幫助您實(shí)現(xiàn)從開(kāi)發(fā)到線上部署的平滑過(guò)渡,確保用戶能夠獲得最佳的訪問(wèn)體驗(yàn),感興趣的可以了解一下2024-09-09
Vue封裝DateRangePicker組件流程詳細(xì)介紹
在后端管理項(xiàng)目中使用vue來(lái)進(jìn)行前端項(xiàng)目的開(kāi)發(fā),但我們都知道Vue實(shí)際上無(wú)法監(jiān)聽(tīng)由第三方插件所引起的數(shù)據(jù)變化。也無(wú)法獲得JQuery這樣的js框架對(duì)元素值的修改的。而日期控件daterangepicker又基于JQuery來(lái)實(shí)現(xiàn)的2022-11-11
vue+golang實(shí)現(xiàn)上傳微信頭像功能
這篇文章主要介紹了vue+golang實(shí)現(xiàn)上傳微信頭像功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10

