使用vue 用antd ui写一个表格嵌套表格

你可以使用Ant Design Vue的Table组件和Expandable组件来实现表格嵌套表格的功能。

首先，你需要在你的Vue项目中安装和引入Ant Design Vue和其样式。

然后，你可以使用Ant Design Vue的Table组件来创建你的主表格，并设置Expandable属性为true来启用嵌套表格的功能。

接着，在Table组件的columns属性中，你可以定义主表格的列和嵌套表格的列。对于嵌套表格的列，你可以使用Expandable组件的render属性来自定义每个嵌套行的展示内容。

最后，你可以在Table组件的dataSource属性中设置你的数据，包括主表格和嵌套表格的数据。

下面是一个简单的示例代码：

<template>
  <a-table :columns="columns" :data-source="data" :expandable="expandable">
    <template slot="expand" slot-scope="{ record }">
      <a-table :columns="nestedColumns" :data-source="record.children">
        <template slot="description" slot-scope="{ text }">
          <span v-html="text" />
        </template>
      </a-table>
    </template>
  </a-table>
</template>

<script>
import { Table, Tag } from 'ant-design-vue';

export default {
  components: { Table, Tag },
  data() {
    return {
      expandable: {
        expandedRowRender: (record) => {
          return (
            <a-table :columns="nestedColumns" :data-source="record.children">
              <a-table-column title="Name" dataIndex="name" />
              <a-table-column title="Age" dataIndex="age" />
              <a-table-column title="Description" dataIndex="description" customRender={(text) => <span v-html="text" />} />
            </a-table>
          );
        },
        rowExpandable: (record) => record.children.length > 0,
      },
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Tags',
          key: 'tags',
          dataIndex: 'tags',
          customRender: (tags) => (
            <span>
              {tags.map((tag) => (
                <Tag color="blue" key={tag}>
                  {tag}
                </Tag>
              ))}
            </span>
          ),
        },
        {
          title: 'Action',
          key: 'action',
          customRender: (text, record) => (
            <span>
              <a>Invite {record.name}</a>
              <a-divider type="vertical" />
              <a>Delete</a>
            </span>
          ),
        },
      ],
      nestedColumns: [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Description',
          dataIndex: 'description',
          customRender: (text) => <span v-html="text" />,
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          tags: ['nice', 'developer'],
          children: [
            {
              key: '1-1',
              name: 'Jim Green',
              age: 42,
              description: '<strong>Jim Green Description</strong>',
            },
            {
              key: '1-2',
              name: 'Joe Black',
              age: 32,
              description: '<strong>Joe Black Description</strong>',
            },
          ],
        },
        {
          key: '2',
          name: 'Jim Red',
          age: 42,
          tags: ['loser'],
          children: [
            {
              key: '2-1',
              name: 'Jim Green',
              age: 42,
              description: '<strong>Jim Green Description</strong>',
            },
            {
              key: '2-2',
              name: 'Joe Black',
              age: 32,
              description: '<strong>Joe Black Description</strong>',
            },
          ],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          tags: ['cool', 'teacher'],
          children: [],
        },
      ],
    };
  },
};
</script>