使用 Ant Design Vue需要注意的地方

在使用 Ant Design Vue 组件时需要注意以下几点：

1. 需要在 Vue 项目中安装并引入 Ant Design Vue 组件库及其样式。
2. Ant Design Vue 组件库的各个组件都需要按需引入，避免一次性引入所有组件导致项目体积过大。
3. 在使用表单组件时，需要为每个表单项设置一个唯一的 name 属性，用于表单提交时获取表单数据。
4. 在使用表格组件时，需要为每个表格列设置一个 dataIndex 属性，用于指定该列的数据源，同时也可以设置其他属性来控制列的样式和渲染方式。
5. 在使用弹窗组件时，需要通过 visible 属性来控制弹窗的显示和隐藏，同时也可以设置其他属性来控制弹窗的样式和行为。
6. 在使用消息提示组件时，可以通过调用相应的方法来显示不同类型的消息，如 message.success、message.warning 等。
7. 在使用布局组件时，需要根据具体的需求选择合适的组件来实现不同的布局效果，如 Layout、Row、Col 等。
8. 在使用样式时，可以直接使用 Ant Design Vue 提供的样式类名，也可以自定义样式并覆盖默认样式。

在使用 Ant Design Vue 组件时需要熟悉各个组件的使用方法和属性，并根据具体的需求进行选择和配置，以实现最佳的效果。 下面是：可以通过以下代码将数据展示在多个 a-card 中，并且每个卡片中包含两个表格：

htmlCopy code
<template>
  <div>
    <a-card v-for="(item, index) in dataSource" :key="index">
      <template #title>
        {{ item.name }}
      </template>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-table :columns="columns" :dataSource="[item.data1]">
            <template #name="{ text }">
              {{ text }} (Table 1)
            </template>
          </a-table>
        </a-col>
        <a-col :span="12">
          <a-table :columns="columns" :dataSource="[item.data2]">
            <template #name="{ text }">
              {{ text }} (Table 2)
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        {
          name: "Card 1",
          data1: [
            { name: "Name 1", age: 30, address: "New York No. 1 Lake Park" },
            { name: "Name 2", age: 25, address: "London No. 1 Lake Park" },
          ],
          data2: [
            { name: "Name 3", age: 20, address: "Sidney No. 1 Lake Park" },
            { name: "Name 4", age: 28, address: "Tokyo No. 1 Lake Park" },
          ],
        },
        {
          name: "Card 2",
          data1: [
            { name: "Name 5", age: 30, address: "New York No. 1 Lake Park" },
            { name: "Name 6", age: 25, address: "London No. 1 Lake Park" },
          ],
          data2: [
            { name: "Name 7", age: 20, address: "Sidney No. 1 Lake Park" },
            { name: "Name 8", age: 28, address: "Tokyo No. 1 Lake Park" },
          ],
        },
      ],
      columns: [
        { title: "Name", dataIndex: "name" },
        { title: "Age", dataIndex: "age" },
        { title: "Address", dataIndex: "address" },
      ],
    };
  },
};
</script>