前端antdv中嵌套子表格的table案列,并且一行有多个数据,整体宽度已经超过了当前页，要有具体的效果图看

在Ant Design Vue (AntdV) 中，创建一个嵌套子表格通常涉及到使用 `<Table>` 组件配合 `<Table>` 的嵌套结构以及 `scopedSlots` 功能。当你需要在一个表格中显示多行数据，并且数据过长导致表格外溢出时，可以尝试以下步骤：

1. 首先，设置主表格的基本样式：

<template>
  <div class="parent-table">
    <a-table :columns="mainColumns" :data-source="mainData" :scroll="{ y: 'calc(100vh - 60px)' }" style="width: 100%">
      <!-- ... -->
    </a-table>
  </div>
</template>

<style scoped>
.parent-table {
  overflow-y: auto;
}
</style>

这里设置了滚动条 (`scroll`) 和表格容器的宽度限制。

2. 定义 `mainColumns` 和 `mainData`，其中 `mainColumns` 包含了子表格的引用：

<script>
export default {
  data() {
    return {
      mainColumns: [
        { title: '父列', dataIndex: 'parentColumn', key: 'parentColumn' },
        { title: '', dataIndex: 'actions', render: (text, record) => (
          <span>
            <a-table :columns="subColumns" :data-source={record.subData} />
          </span>
        )}
      ],
      mainData: [
        // 实际的数据对象，每项包含 'parentColumn' 和 'subData' 属性
      ]
    };
  },
  // ...
};
</script>

3. 子表格的定义放在 `actions` 列的 `render` 函数里，`subColumns` 和 `subData` 也需要在数据中定义。

注意，由于无法在这里提供实际的效果图，你可以参照 Ant Design Vue 的官方文档示例，特别是关于动态加载子组件的部分（https://vue.ant.design/components/table/example#%E5%9F%A8%E7%9B%B4%E5%8D%95%E5%AD%A6%E8%A1%A8），结合上面的代码结构去调整你的项目。