<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>

<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ù)
? ? ?// 也可展示改行對應(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>

columns: [
? {
? ? title: '性別', // 該列展示的title
? ? dataIndex: 'sex', // 對應(yīng)標志，與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ù)，對應(yīng)的數(shù)據(jù)高亮，可以手動清除狀態(tài)
? },
? {
? ? title: '登記日期',
? ? dataIndex: 'registDate',?
? ? sorter: true, // true，表示該列出現(xiàn)排序icon,在change事件中，能監(jiān)聽到對應(yīng)的數(shù)據(jù)變化
? },
? {
? ? width: '100px', // 該列的寬度，支持百分比等
? ? title: '操作',
? ? key: 'action',
? ? dataIndex: '',
? ? fixed: 'right',
? ? scopedSlots: { customRender: 'action' }, // customRender 對應(yīng)table中的插槽名，可以在每行自定義展示的內(nèi)容，
? },
],

[{
? id: '1',
? sex: 'John Brown',
? age: 32,
? registDate: '2019-05-09',
}]

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事件時，切記要把此處的事件清除，因為這兩個事件重疊了，可能到時候會導(dǎo)致一些莫名的bug
? // ? this.pagination.current = current
? // },
? showTotal: total => `總數(shù)：${total}人`, // 可以展示總數(shù)
},

{ x: number , y: number }

// 在頁面初始化的時候調(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={record => record.uid}
// 事件
setTableKey(record) {
? return record.id
}

// 點擊行，展示對應(yīng)的數(shù)據(jù),寫在data中
customClick: record => ({
? on: { // 事件
? ? click: () => {
? ? ? // 點擊改行時要做的事情
? ? ? // ......
? ? },
? },
}),

handleTableChange(pagination, filters, sorter) {
? console.log(pagination, filters, sorter)
}