vue3 Ant Design Vue ts格式，写一个嵌套子表格,子表格的列数和列名与主表格不同并且可选择的表格,要求选择子列表中的数据，也要带上主列表的数据

在Vue3中结合Ant Design Vue和TypeScript，创建一个可选择子表格并显示嵌套数据的组件，可以按照以下步骤编写：

首先，安装所需的依赖：

npm install @ant-design-vue/components table @vue/cli-plugin-typescript

然后，在组件文件（例如`NestedTable.vue`）中，我们可以这样实现：

<template>
  <a-table :columns="mainColumns" :data-source="mainData">
    <!-- 主表格部分 -->
    <template slot="body" slot-scope="record">
      <!-- 添加一个复选框和子表格的入口 -->
      <template slot="operation">
        <el-checkbox v-model="selectedItems.includes(record.key)" @change="handleMainCheckChange(record.key)"></el-checkbox>
        <!-- 子表格 -->
        <a-table :columns="childColumns" :data-source="getSubTableData(record.key)">
          <template slot-scope="subRecord">
            <!-- 显示子表格数据 -->
            <td>{{ subRecord[childColumnName] }}</td> <!-- 具体列名替换为childColumnName -->
          </template>
        </a-table>
      </template>
    </template>
  </a-table>

  <!-- 控制状态 -->
  <div>
    已选择的主表项: {{ selectedItems }}
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Table, TableColumn } from '@ant-design-vue/components/table';

export default defineComponent({
  components: {
    Table,
  },
  setup() {
    // 定义主表格的列配置
    const mainColumns: TableColumn[] = [
      ...// 填写主表格的列配置，比如 key: { title: 'ID', dataIndex: 'id' }
    ];

    // 假设主表格数据是一个对象数组
    const mainData = ref([{ key: 1, name: 'Item 1' }, ...]); // 填写实际数据

    // 子表格列配置，假设与主表不同
    const childColumns: TableColumn[] = [
      { title: '子列1', dataIndex: 'childColumn1' },
      { title: '子列2', dataIndex: 'childColumn2' },
    ];

    // 子表格数据获取函数，这里以动态计算为例
    const getSubTableData = (parentKey: number | string) => {
      // 根据主键查询子表格数据，这里仅示例返回静态数据
      return [{ id: parentKey * 10, childColumn1: `子表${parentKey} - 1`, childColumn2: `子表${parentKey} - 2` }];
    };

    // 用于记录选中的主表项
    const selectedItems = ref([]);

    // 处理主表项选中事件
    const handleMainCheckChange = (key: number | string) => {
      if (selectedItems.value.includes(key)) {
        selectedItems.value = selectedItems.value.filter(item => item !== key);
      } else {
        selectedItems.value.push(key);
      }
    };

    return { mainColumns, mainData, childColumns, selectedItems };
  },
});
</script>
<style scoped></style>

这个例子中，我们创建了一个主表格和一个嵌套的子表格，并允许用户通过父级表格的行选择子表格中的行。当用户选择主表格的行时，我们会更新`selectedItems`。