Ant?Design?Vue中的table與pagination的聯(lián)合使用方式
Ant Design Vue中table與pagination聯(lián)合使用
表格table使用鏈接:ant design vue : Table
分頁pagination使用鏈接:ant design vue: Pagination
表格單獨(dú)使用時(shí),自帶簡單分頁,只包含 上一頁, 頁面碼, 下一頁,例如:
但如果想要更加復(fù)雜的分頁,例如顯示總數(shù),改變每頁個(gè)數(shù)等等功能,則需要傳入pagination參數(shù)來自定義,看代碼:
<a-table :datasource="data" :columns="columns" :pagination="pagination"/> <script> const data=[...] const columns=[...] export default { data() { return { data, columns, pagination: { pageSize: 20, // 默認(rèn)每頁顯示數(shù)量 showSizeChanger: true, // 顯示可改變每頁數(shù)量 pageSizeOptions: ['10', '20', '30', '40'], // 每頁數(shù)量選項(xiàng) showTotal: total => `Total ${total} items`, // 顯示總數(shù) showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改變每頁數(shù)量時(shí)更新顯示 } } } } </script>
還有更多的配置可以自行設(shè)置,按照這個(gè)形式就好。
效果圖:
ant.design.vue中table的使用說明
table的創(chuàng)建
<a-table ? :columns="columns" // 表頭 ? :dataSource="data" // 數(shù)據(jù)源 ? :loading='loading' // 加載loading ? :pagination="pagination" ?// 頁腳 ? :scroll="scroll" // 控制table的滾動(dòng) ? :rowKey="setTableKey" // 每一行定義一個(gè)單獨(dú)的key ? :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" //? ? :customRow="customClick" // 點(diǎn)擊每一行的事件 ? @change="handleTableChange" // 表格的change事件 ? > ? <span slot="action" slot-scope="record"> ? ? ?// slot="action" 插槽名 ? ? ?// slot-scope="record" // 該插槽內(nèi)部能搞抓取到的改行的數(shù)據(jù) ? ? ?// 也可展示改行對(duì)應(yīng)的內(nèi)容 {{ record.name }} ? ? <a href="javascript:;" rel="external nofollow" rel="external nofollow" ?@click.stop="editHandle(record)">編輯</a> ? ? <a-divider type="vertical"/> ? ? <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.stop="deleteRecord(record)">刪除</a> ? </span> </a-table>
table之columns
表格的表頭數(shù)據(jù)源
columns: [ ? { ? ? title: '性別', // 該列展示的title ? ? dataIndex: 'sex', // 對(duì)應(yīng)標(biāo)志,與dataSource中數(shù)據(jù)匹配的標(biāo)識(shí)符,支持"info.sex"的方式 ? ? filters: [ // 篩選功能,該數(shù)組表示刷選的選項(xiàng)值,change事件獲取的為 value,text為展示內(nèi)容 ? ? ? { text: '男', value: 'male' }, ? ? ? { text: '女', value: 'female' }, ? ? ], ? ? filterMultiple: false, // false為單選 ? ? filteredValue: [], // 受控狀態(tài),加上它時(shí),則需要在change事件中,手動(dòng)的給它賦值, ? ? // 它表示選中的數(shù)據(jù),對(duì)應(yīng)的數(shù)據(jù)高亮,可以手動(dòng)清除狀態(tài) ? }, ? { ? ? title: '登記日期', ? ? dataIndex: 'registDate',? ? ? sorter: true, // true,表示該列出現(xiàn)排序icon,在change事件中,能監(jiān)聽到對(duì)應(yīng)的數(shù)據(jù)變化 ? }, ? { ? ? width: '100px', // 該列的寬度,支持百分比等 ? ? title: '操作', ? ? key: 'action', ? ? dataIndex: '', ? ? fixed: 'right', ? ? scopedSlots: { customRender: 'action' }, // customRender 對(duì)應(yīng)table中的插槽名,可以在每行自定義展示的內(nèi)容, ? }, ],
table之dataSource
表格的數(shù)據(jù)源
[{ ? id: '1', ? sex: 'John Brown', ? age: 32, ? registDate: '2019-05-09', }]
table之loading
頁面是否加載中
- boolean
- table之pagination
pagination: { ? // 分頁配置器 ? pageSize: 10, // 一頁的數(shù)據(jù)限制 ? current: 1, // 當(dāng)前頁 ? total: 10, // 總數(shù) ? hideOnSinglePage: false, // 只有一頁時(shí)是否隱藏分頁器 ? showQuickJumper: true, // 是否可以快速跳轉(zhuǎn)至某頁 ? showSizeChanger: true, // 是否可以改變 pageSize ? pageSizeOptions: ['5', '10', '30'], // 指定每頁可以顯示多少條 ? // onShowSizeChange: (current, pagesize) => { // 改變 pageSize時(shí)的回調(diào) ? // ? this.pagination.current = current ? // ? this.pagination.pageSize = pagesize ? // ? .... ? // }, ? // onChange: (current) => { // 切換分頁時(shí)的回調(diào), ? // 當(dāng)在頁面定義change事件時(shí),切記要把此處的事件清除,因?yàn)檫@兩個(gè)事件重疊了,可能到時(shí)候會(huì)導(dǎo)致一些莫名的bug ? // ? this.pagination.current = current ? // }, ? showTotal: total => `總數(shù):${total}人`, // 可以展示總數(shù) },
table之scroll
設(shè)置橫向或縱向滾動(dòng),也可用于指定滾動(dòng)區(qū)域的寬和高,建議為 x 設(shè)置一個(gè)數(shù)字,如果要設(shè)置為 true,需要配合樣式 .ant-table td { white-space: nowrap; }
{ x: number , y: number }
一般用于大數(shù)據(jù)展示時(shí),讓橫向出現(xiàn)滾動(dòng)的效果,主要用來兼容小屏幕
也可以固定某一列,在columns中對(duì)應(yīng)的列添加fixed: 'right',
不過我們也可以動(dòng)態(tài)的設(shè)置
// 在頁面初始化的時(shí)候調(diào)用事件,去判斷該如何展示 const screenWidth = document.body.clientWidth if (screenWidth >= 1366 && this.screenWidth <= 1540) { ? this.scroll.x = '115%' } else if (screenWidth < 1366) { ? this.scroll.x = '125%' }
table之rowKey
表格行 key 的取值,可以是字符串或一個(gè)函數(shù)
處理多選至關(guān)重要一項(xiàng),只有設(shè)置了該屬性,多選時(shí),選中的值才會(huì)出現(xiàn)對(duì)應(yīng)的高亮
// table中使用 :rowKey={record => record.uid} // 事件 setTableKey(record) { ? return record.id }
table之rowSelection
列表項(xiàng)是否可選擇,也就是通常的多選
selectedRowKeys
:數(shù)組,受控的選中狀態(tài),可以通過它,手動(dòng)添加選中行,當(dāng)選中時(shí),將已選中的數(shù)據(jù)賦值給該值;onChange
: 選中的change事件
table之customRow
設(shè)置行屬性,已經(jīng)對(duì)應(yīng)的事件
// 點(diǎn)擊行,展示對(duì)應(yīng)的數(shù)據(jù),寫在data中 customClick: record => ({ ? on: { // 事件 ? ? click: () => { ? ? ? // 點(diǎn)擊改行時(shí)要做的事情 ? ? ? // ...... ? ? }, ? }, }),
table之change
分頁、排序、篩選變化時(shí)觸發(fā)
handleTableChange(pagination, filters, sorter) { ? console.log(pagination, filters, sorter) }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue自定義指令實(shí)現(xiàn)元素滑動(dòng)移動(dòng)端適配及邊界處理
這篇文章主要為大家介紹了vue自定義指令實(shí)現(xiàn)元素滑動(dòng)移動(dòng)端適配及邊界處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問題及解決
這篇文章主要介紹了moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05詳解vee-validate的使用個(gè)人小結(jié)
本篇文章主要介紹了詳解vee-validate的使用個(gè)人小結(jié),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-06-06Vue el-upload單圖片上傳功能實(shí)現(xiàn)
這篇文章主要介紹了Vue el-upload單圖片上傳功能實(shí)現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11Vue3中導(dǎo)入和使用組件幾種常見方法(.vue文件)
組件是Vue.js最強(qiáng)大的功能之一, 組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要介紹了Vue3中導(dǎo)入和使用組件幾種常見方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09