Ant Design pro of vue如何使用a-list的分页设置

 找到图片中的这个位置，写一个pagination来动态配置a-list的pagination分页

 在data的return 中设置pagination的配置

 完整代码如下：

<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row>
        <a-col :sm="8" :xs="24">
          <info title="植物总数量" value="1677" :bordered="true" />
        </a-col>
        <a-col :sm="8" :xs="24">
          <info title="信息完善的植物数量" value="1677" :bordered="true" />
        </a-col>
        <a-col :sm="8" :xs="24">
          <info title="信息不完善的植物数量" value="0" />
        </a-col>
      </a-row>
    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="植物列表">
      <div slot="extra">
        <a-radio-group v-model="status" @change="statusChange">
          <a-radio-button value="all">全部</a-radio-button>
          <a-radio-button value="herbaceous">草本</a-radio-button>
          <a-radio-button value="woody">木本</a-radio-button>
          <a-radio-button value="Liana">藤本</a-radio-button>
          <a-radio-button value="Meaty">多肉</a-radio-button>
          <a-radio-button value="Lanco">兰科</a-radio-button>
          <a-radio-button value="aquatic">水生</a-radio-button>
          <a-radio-button value="perennial_root">宿根</a-radio-button>
          <a-radio-button value="fruits">水果</a-radio-button>
          <a-radio-button value="vegetables">蔬菜</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px" />
      </div>

      <div class="operate">
        <a-button type="dashed" style="width: 100%" icon="plus" @click="add">添加</a-button>
      </div>

      <a-list size="large" :pagination="pagination">
        <a-list-item :key="index" v-for="(item, index) in data">
          <a-list-item-meta :description="item.description">
            <!-- 设置description多出来的省略 -->

            <a-avatar slot="avatar" size="large" shape="square" :src="item.avatar" />
            <a slot="title">{{ item.title }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <a @click="edit(item)">编辑</a>
          </div>
          <div slot="actions">
            <a-dropdown>
              <!--   @click函数返回事件点击和item-->
              <a-menu slot="overlay" @click="handleMenuClick($event, item)">
                <a-menu-item ><a>详情</a></a-menu-item>
                <a-menu-item><a>删除</a></a-menu-item>
              </a-menu>
              <a>更多<a-icon type="down" /></a>
            </a-dropdown>
          </div>
          <div class="list-content">
            <div class="list-content-item">
              <span>录入时间</span>
              <p>{{ item.startAt }}</p>
            </div>
            <!-- <div class="list-content-item">
              <a-progress
                :percent="item.progress.value"
                :status="!item.progress.status ? null : item.progress.status"
                style="width: 180px"
              />
            </div> -->
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </page-header-wrapper>
</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件
// 如果要引入上一级目录的文件，需要使用 @/views/experiment_views/experiment_plant_data.vue
// D:\ant_design\ant-design-vue-pro\src\views\list\modules\TaskForm.vue
import TaskForm from '@/views/list/modules/TaskForm.vue'
import Info from '@/views/list/components/Info'
import { getPlantAllList } from '@/api/plantdata'
const data = []

export default {
  name: 'StandardList',
  components: {
    TaskForm,
    Info,
  },

  data() {
    return {
      data,
      status: 'all',
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['5', '10', '20', '30'],
        total: 50,
        // 设置页面变化时的回调，调用methods中的onChange方法
        onChange: this.onChange,
        // 设置每页显示条数变化时的回调
        onShowSizeChange: this.onShowSizeChange,
      },
    }
  },
  created() {
    this.Paging_request_data(1, 5)
  },

  methods: {
    handleMenuClick(e, item) {
      console.log('click', e, item)
      if (e.key === 'item_0') {
          window.open(item.plant_detail_link)
      } else if (e.key === 'item_1') {
        this.$confirm({
          title: '确定删除吗？',
          content: '删除后无法恢复',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            console.log('OK')
          },
          onCancel() {
            console.log('Cancel')
          },
        })
      }
    },
    // 分页请求数据
    Paging_request_data(currentPage, pageSize) {
      // 设置请求参数
      const params = {
        page: currentPage,
        pageSize: pageSize,
      }
      // 调用接口
      getPlantAllList(params).then((res) => {
        // 设置数据

        this.data = res.data
        this.pagination.total = res.data_total
      })
    },

    // 监听status的变化
    statusChange(e) {
      console.log(e.target.value)
      this.status = e.target.value
    },

    // 页面变化时的回调
    onShowSizeChange(current, size) {
      this.pagination.pageSize = size
      this.Paging_request_data(current, size)
    },
    onChange(page, pageSize) {
      // console.log(page, pageSize)
      this.Paging_request_data(page, pageSize)
    },
    add() {
      this.$dialog(
        TaskForm,
        // component props
        {
          record: {},
          on: {
            ok() {
              console.log('ok 回调')
            },
            cancel() {
              console.log('cancel 回调')
            },
            close() {
              console.log('modal close 回调')
            },
          },
        },
        // modal props
        {
          title: '新增',
          width: 700,
          centered: true,
          maskClosable: false,
        }
      )
    },
    edit(record) {
      console.log('record', record)
      this.$dialog(
        TaskForm,
        // component props
        {
          record,
          on: {
            ok() {
              console.log('ok 回调')
            },
            cancel() {
              console.log('cancel 回调')
            },
            close() {
              console.log('modal close 回调')
            },
          },
        },
        // modal props
        {
          title: '操作',
          width: 700,
          centered: true,
          maskClosable: false,
        }
      )
    },
  },
}
</script>

<style lang="less" scoped>

.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

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