Michael的笔记本

Ant官方的直接拿到本地来用不好使，下面是GPT生成的基于ant-design-vue+vue3生成的Table分页样例

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource" :pagination="pagination" :loading="loading" @change="handlePagination">
      <template #name="{ text }">
        {{ text + '岁' }}
      </template>
    </a-table>
  </div>
</template>

<script>
import axios from 'axios';
import { Table, Pagination } from 'ant-design-vue';

export default {
  components: {
    'a-table': Table,
    'a-pagination': Pagination
  },
  data() {
    return {
      columns:  [{
        title: 'phone',
        dataIndex: 'phone',
        sorter: true,
        width: '20%',
      }, {
        title: 'Gender',
        dataIndex: 'gender',
        filters: [{
          text: 'Male',
          value: 'male',
        }, {
          text: 'Female',
          value: 'female',
        }],
        width: '20%',
      }, {
        title: 'Email',
        dataIndex: 'email',
      }],
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      loading: false,
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      axios.get('https://randomuser.me/api?noinfo', {
        params: {
          page: this.pagination.current,
          results: this.pagination.pageSize,
        }
      }).then(response => {
        this.dataSource = response.data.results;
        this.pagination.total = 200;
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      });
    },
    handlePagination(pagination) {
      console.log(pagination)
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getData();
    },
  }
}
</script>