antd vue table可展开多级

Ant Design Vue 的 Table 组件默认支持单级展开，如果想要实现多级展开，可以使用自定义渲染模板的方式来进行实现。具体步骤如下：

1. 在 columns 中定义需要展开的列，并设置 `scopedSlots` 属性为一个函数，该函数返回一个 Vue 组件，用来渲染展开后的内容。

<template>
  <a-table :columns="columns" :data-source="data">
    <template #expand="{ record }">
      <div>
        <!-- 渲染子级数据 -->
      </div>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' },
        },
        // 其他列
      ],
      data: [
        {
          key: '1',
          name: '一级数据1',
          children: [
            {
              key: '11',
              name: '二级数据1-1',
              children: [
                {
                  key: '111',
                  name: '三级数据1-1-1',
                },
              ],
            },
            // 其他子级数据
          ],
        },
        // 其他一级数据
      ],
    };
  },
};
</script>

2. 在 `scopedSlots` 函数中，判断当前数据是否有子级数据，如果有则使用 `a-table` 组件递归渲染子级数据。

scopedSlots: {
  customRender: 'name',
  expand: ({ children }) => ({
    render: (h, { row }) => {
      if (!children) return null;
      return h('a-table', {
        props: {
          dataSource: children,
          columns: this.columns,
          pagination: false,
          rowKey: 'id',
        },
      });
    },
  }),
},

这样就可以实现多级展开了。需要注意的是，如果数据层级过深，可能会导致性能问题，可以根据实际情况进行优化。