在指定页面添加a-table

<template>
  <a-table
    :dataSource="dataSource"
    :columns="columns"
    :loading="loading"
    :row-key="(record) => record.key"
    :pagination="pagination"
  > 
  </a-table>
</template>

<script setup lang="ts">
import {
            
      ref } from "vue";

let dataSource = [
  {
            
     
    key: "1",
    name: "胡彦斌",
    age: 32,
    address: "西湖区湖底公园1号",
  },
  {
            
     
    key: "2",
    name: "胡彦祖",
    age: 42,
    address: "西湖区湖底公园1号",
  },
];

let columns = [
  {
            
     
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
            
     
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
            
     
    title: "住址",
    dataIndex: "address",
    key: "address",
  },
];

let pagination = ref({
            
     
  // 数据总数
  total: dataSource.length,
  // 当前页数
  current: 1,
  // 每页条数
  pageSize: 4,
  // 展示总数
  showTotal: (total) => `共 ${ total} 条`,
  // 是否可以改变pageSize
  showSizeChanger: true,
  // 设置每页可以展示多少条的选项
  pageSizeOptions: ["2", "5", "8", "4"],
  // 改变pageSize后触发
  showSizeChange: (current: number, pageSize: any) => (
    (pagination.value.current = current), (pagination.value.pageSize = pageSize)
  ),
  // 小尺寸分页
  size: "small",
  // 是否可以快速跳转至某页
  showQuickJumper: true,
  //默认条数
  defaultPageSize: 4,
});
let loading = ref<boolean>(false);
</script>

在项目app.vue文件下填写

<template>
  <a-config-provider :locale="zhCN">
    <router-view />
  </a-config-provider>
</template>

<script setup>
import zhCN from "ant-design-vue/es/locale/zh_CN";
</script>

这样就完成了对a-table的所有组件进行中文转化了。