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) {
        		console.log(page, pageSize)
   			}
	}
}

• 在 pagenation 中直接以 change 作为属性，但是根本监听不到页码的变化，即控制台没有任何打印
• 有点麻爪了！！！
• 再三查看官方文档，也没有找到相关描述
• 然后无意中百度到：
  
• 滋滋，好吧，不知道为什么，我们看到的 官方文档 竟然有些差别
• 在 pagenation 使用 onChange(page, pageSize)
• 果然，这次监听到了页码的变化

最后的源码

<template>
	<a-list size="large" :pagination="{ ...paginationProps, current: currentPage }">
  		<a-list-item :key="index" v-for="(item, index) in showData">
    		<a-list-item-meta description="">
            	<a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
             	<a slot="title">{{ item.enterprise_name }}</a>
            </a-list-item-meta>
            <div slot="actions">
              <a @click="manageFiles(item)">管理文件</a>
            </div>
            <div class="list-content-item">
              <span>平台注册时间</span>
              <p>{{ item.registered_datetime | moment }}</p>
            </div>
            <div class="list-content-item">
              <span>文件状态</span>
              <div>
                <a-badge :status="item.files_state | statusTypeFilter" :text="item.files_state | statusFilter" />
              </div>
        	</div>
    	</a-list-item>
	</a-list>
</template>

<script>
const statusMap = {
  0: {
    status: 'error',
    text: '未完善'
  },
  1: {
    status: 'success',
    text: '已完善'
  }
}
const avatarArr = [
  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png'
]
const enterpriseArr = [ '####################1', '####################2', '####################3', '####################4' ]
const data = []
for (let i = 0; i < 50; i++) {
  data.push({
    avatar: avatarArr[i % 4],
    enterprise_name: `${enterpriseArr[i % 4]}${Math.floor(i / 4 + 1)}`,
    registered_datetime: new Date(),
    files_state: i % 2
  })
}
export default {
  name: 'Certification',
  data () {
    return {
      currentPage: 1, // 当前页
      originData: data,
      data
    }
  },
  computed: {
    paginationProps () {
      const _this = this
      return {
        showQuickJumper: true,
        pageSize: 4,
        total: this.data.length,
        onChange (page, pageSize) {
          _this.currentPage = page
        }
      }
    },
    showData () {
      const { pageSize, total } = this.paginationProps // 每页条数
      const res = []
      const start = (this.currentPage - 1) * pageSize
      const end = this.currentPage * pageSize < total ? (this.currentPage * pageSize) : total
      for (let i = start; i < end; i++) {
        res.push(this.data[i])
      }
      return res
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  }
}
</script>

<style lang="less" scoped>
.list-content-item {
	color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    flex: 1;
    span {
    	line-height: 20px;
    }
    p {
    	margin-top: 4px;
        margin-bottom: 0;
        line-height: 22px;
    }
}
</style>