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