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)分頁器呢?
這是因?yàn)椋?/p>
組件默認(rèn)開啟了分頁,你不但可以通過 pagination 配置顯示或隱藏,還可以配置顯示位置。
如果需要,還可以同時配置上下同時顯示分頁。
組件自帶分頁功能,并默認(rèn)開啟。
那我們有時候數(shù)據(jù)量不大,根本不想有分頁器的存在該怎樣把它取消呢?
在使用table組件的時候,配置:pagination="false" 即可。
效果如下:
注意是::pagination=“false” 噢!!!
題外話:
其實(shí),我們最該細(xì)細(xì)研讀官方文檔。
使用組件的時候遇到問題,我們首先要去看文檔內(nèi)相關(guān)配置項(xiàng)的介紹。
再根據(jù)配置項(xiàng)的默認(rèn)值和數(shù)據(jù)類型,就能處理大部分遇到的問題
就像我記錄的這些問題,一方面是給遇到同樣問題的小伙伴提供一個解決方案,另一方面也是給自己一個警醒,避免下次再出現(xiàn)同樣的問題。
通過我多次遇到的問題,發(fā)現(xiàn)解決問題在于思路的選?。?/strong>
- 組件:官方文檔—>配置項(xiàng)介紹—>默認(rèn)值 / 數(shù)據(jù)類型
- 報(bào)錯:錯誤位置—>報(bào)錯內(nèi)容—>官方組件使用問題 / 自定義組件注冊問題 / 配置項(xiàng) / 數(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ù)量選項(xiàng) 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)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中利用simplemde實(shí)現(xiàn)markdown編輯器(增加圖片上傳功能)
這篇文章主要介紹了vue中利用simplemde實(shí)現(xiàn)markdown編輯器(增加圖片上傳功能),本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因?yàn)?.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下2023-12-12Vue使用mockjs問題(返回?cái)?shù)據(jù)、get、post 請求)
這篇文章主要介紹了Vue使用mockjs問題(返回?cái)?shù)據(jù)、get、post 請求),具有很好的參考價值,希望對大家有所幫助。2023-05-05vue watch普通監(jiān)聽和深度監(jiān)聽實(shí)例詳解(數(shù)組和對象)
這篇文章主要介紹了vue watch普通監(jiān)聽和深度監(jiān)聽(數(shù)組和對象),文中單獨(dú)通過代碼給大家介紹了vue watch 深度監(jiān)聽的方法,感興趣的朋友一起看看吧2018-08-08Vue3+vueuse實(shí)現(xiàn)放大鏡示例詳解
這篇文章主要為大家介紹了Vue3+vueuse實(shí)現(xiàn)放大鏡示例過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue新玩法VueUse工具庫具體用法@vueuse/core詳解
這篇文章主要介紹了vue新玩法VueUse-工具庫@vueuse/core,VueUse不是Vue.use,它是一個基于?Composition?API?的實(shí)用函數(shù)集合,下面是具體的一些用法,需要的朋友可以參考下2022-08-08利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法
這篇文章主要給大家介紹了關(guān)于利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12