vue+Ant design使用table分页的功能

vue+Ant design使用table分页的功能

<a-table
    :columns="columns"
    :data-source="data"
    :scroll="{ x: 1200,y:1000 }"
    :pagination="pagination" 
    @change="tablePaginationChange"
> a-table>

:pagination=“pagination”
@change=“tablePaginationChange”
这两个是重点

data() {
	return {
		page: 1,//初始页
		size: 10,//每页数据
		pagination: {
  			current:1,//分页的索引
  			total: 0,
  			pageSize: 10, //每页中显示10条数据
  			showSizeChanger: false,//不设置每页的数据条数
  			size:"small",
  			pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
  			showTotal: (total, range) => {
          		return (
            		"第" +
            		range[0] +
            		"到第" +
            		range[1] +
            		"条" +
            		"  " +
            		"共" +
            		total +
            		"条"
          		);
        	},  //分页中显示总的数据
		},
	}
}
methods: {
	//分页发生变化触发的事件
	tablePaginationChange(pagination) {
       console.log(pagination);
       this.pagination.current = pagination.current;
       this.pagination.pageSize = pagination.pageSize;
       this.page = pagination.current;
       this.size = pagination.pageSize;
    },
}