antdesignvue 加载数据

Ant Design Vue 是一个 UI 组件库，它提供了一些常用的组件，例如表格、表单、按钮等等。要加载数据，可以使用表格组件来展示数据。

首先，需要准备好数据源。可以从后端接口获取数据，也可以使用本地数据。假设我们有一个本地数据数组：

const dataSource = [
  {
    id: 1,
    name: "张三",
    age: 18,
    address: "北京市海淀区",
  },
  {
    id: 2,
    name: "李四",
    age: 20,
    address: "上海市浦东新区",
  },
  // ...
];

接下来，使用 `<a-table>` 组件来展示数据。其中，`<a-table>` 组件需要传入 `columns` 和 `dataSource` 两个属性。

<template>
  <a-table :columns="columns" :data-source="dataSource"></a-table>
</template>

<script>
import { Table } from "ant-design-vue";

export default {
  components: {
    "a-table": Table,
  },
  data() {
    return {
      columns: [
        {
          title: "ID",
          dataIndex: "id",
        },
        {
          title: "姓名",
          dataIndex: "name",
        },
        {
          title: "年龄",
          dataIndex: "age",
        },
        {
          title: "地址",
          dataIndex: "address",
        },
      ],
      dataSource: dataSource,
    };
  },
};
</script>

在上面的例子中，`columns` 数组定义了表格的列，`dataSource` 数组定义了数据。`dataIndex` 属性指定了数据源中的字段。可以根据实际情况，修改 `columns` 和 `dataSource` 数组来展示不同的数据。

当数据源变化时，只需要修改 `dataSource` 数组即可。表格会自动重新渲染，展示最新的数据。