Ant Design Vue中 a-table 嵌套子表格

在Ant Design Vue中，可以通过a-table组件的expandedRowRender属性来实现嵌套表格（子表格）的功能。以下是一个简单的例子：

<template>
  <a-table :columns="columns" :dataSource="data" :expandedRowRender="expandedRowRender">
    <a slot="name" slot-scope="text">{{ text }}</a>
  </a-table>
</template>
 
<script>
export default {
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'name', key: 'name', scopedSlots: { customRender: 'name' } },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Address', dataIndex: 'address', key: 'address' },
        {
          title: 'Action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Doe',
          age: 32,
          address: '101 Street Name, City, State',
          children: [
            {
              key: '1-1',
              name: 'Jim Smith',
              age: 24,
              address: '202 Street Name, City, State',
            },
            // ... more children
          ],
        },
        // ... more data
      ],
    };
  },
  methods: {
    expandedRowRender(record) {
      const childrenColumnName = 'children';
      const childrenData = record[childrenColumnName];
      if (childrenData) {
        return (
          <a-table
            columns={this.columns}
            dataSource={childrenData}
            pagination={false}
            rowKey="key"
          />
        );
      } else {
        return null;
      }
    },
  },
};
</script>

在这个例子中，data数组中的每个对象都可以包含一个children属性，它是一个数组，包含了子表格中的数据。expandedRowRender方法会为每个可展开的行渲染子表格。子表格使用的columns和父表格是一样的，但是数据源（dataSource）是父行对象的children属性。