Ant Design Vue 中关于 List 组件分页的配置（pagenation）

关于 List 组件

• 这里可以先看看官方文档为我们提供的API
  
• 清楚地看到，List组件提供了 pagenation 属性，说明我们可以通过该属性针对List的数据进行分页
• 再看看对于 pagenation，官方文档主要提供了哪些配置选项
  
• 不幸的是，在 List 组件这一章对 pagenation 属性的描述极其有限，它提示我们点击“配置”这段蓝色字体

关于 Pagenation 组件

• 点击之后，就来到了Pagenation 分页器组件这一章，很明显，Pagenation（分页器）组件的API和 List 组件的 pagenation 属性配置项是相对应的
  
• 如果只是属性的话，pagenation 可以很轻易地对应
• 但是我们使用 List 组件的分页功能，肯定是要翻页的呀，翻页的具体逻辑肯定是需要我们来具体实现的
• 对于 Pagenation 组件来说，我们可以通过 chang 事件，即 @change 来控制，每当 current 页码变化的时候，更新数据就可以了
• 但是 @change 事件又要如何体现在 List 组件的pagenation 属性中去呢？

关于 List 组件的 pagenation 属性

• 仔细看看官方文档对 pagenation 属性的描述，可以发现，它的值的类型为 boolean | object
• 所以，要将组件的 @change 事件体现在 object 对象里
• 尝试：

<a-list size="large" :pagination="paginationProps ">
	<a-list-item :key="index" v-for="(item, index) in showDate">
		......
	</a-list-item>
</a-list>

export default {
   
	data () {
   
		return {
   
			...
		}
	},
	...,
	computed: {
   
		paginationProps () {
   
		return {
   
			showQuickJumper: true,
      		pageSize: 4,
      		total: this.data.length,
      		change (page, pageSize) {
   <