vue2的嵌套子表格示例,用Ant Design

以下是一个使用Vue 2和Ant Design的嵌套子表格示例：

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template slot-scope="text, record">
      <a-table class="nested-table" :columns="nestedColumns" :data-source="record.children">
        <template slot-scope="text, record">
          <a-table-column title="Child Column" dataIndex="childColumn"></a-table-column>
        </template>
      </a-table>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: 'Column 1', dataIndex: 'column1' },
        { title: 'Column 2', dataIndex: 'column2' },
        { title: 'Column 3', dataIndex: 'column3' },
      ],
      nestedColumns: [
        { title: 'Nested Column', dataIndex: 'nestedColumn' },
      ],
      dataSource: [
        {
          key: '1',
          column1: 'Data 1',
          column2: 'Data 2',
          column3: 'Data 3',
          children: [
            {
              key: '1-1',
              nestedColumn: 'Nested Data 1',
            },
            {
              key: '1-2',
              nestedColumn: 'Nested Data 2',
            },
          ],
        },
        {
          key: '2',
          column1: 'Data 4',
          column2: 'Data 5',
          column3: 'Data 6',
          children: [
            {
              key: '2-1',
              nestedColumn: 'Nested Data 3',
            },
          ],
        },
      ],
    };
  },
};
</script>

<style scoped>
.nested-table {
  margin: 16px;
}
</style>

在这个示例中，我们使用了Vue的插槽（slot）功能来嵌套子表格。外层表格使用了`columns`和`dataSource`属性，内层表格使用了`nestedColumns`和`record.children`属性。你可以根据自己的需求调整列和数据源。

确保你已经正确引入了Ant Design的样式和组件。你还可以根据需要对表格的样式进行自定义。