vue3版本的antd表格组件怎么设置有子数据的可以展开 没得子数据不允许展开

在Vue3中使用Ant Design的Table组件来创建可展开的行，你可以通过`expandable`属性和`row/expander`字段来实现这个功能。首先，你需要确保你的表格数据结构支持嵌套的数据，通常是一个包含`children`属性的对象数组。

以下是如何配置的一个基础示例：

<template>
  <a-table :data="tableData" :expandable="{ expandRowByClick: true }">
    <a-column title="标题" prop="title"></a-column>
    <!-- 如果某列对应的数据项有子数据，添加一个额外的列用于显示或隐藏展开按钮 -->
    <a-column title="展开" prop="expander" render="renderExpander" />
    <!-- 其他列... -->
  </a-table>
</template>

<script setup>
import { ref } from 'vue';
import { Table, Column, ExpandableRow } from 'ant-design-vue';

const tableData = ref([
  {
    key: '0',
    title: '可展开行示例',
    children: [
      { title: '子行1', description: '这是子行的内容...' },
      { title: '子行2', description: '这是另一个子行...' }
    ]
  },
  // ...其他行
]);

// 展开函数，判断当前行是否有子数据
function renderExpander(row) {
  if (row.children && row.children.length > 0) {
    return (
      <span>
        <ExpandableRow expanded={row.expanded} on-expand={() => toggleExpansion(row)}>
          <span>+</span>
        </ExpandableRow>
      </span>
    );
  }
  return null; // 或者直接返回空，表示无子数据时不显示展开图标
}

// 显示或折叠子行的函数
function toggleExpansion(row) {
  row.expanded = !row.expanded;
}
</script>

在这个例子中，我们设置了`expandable.expandRowByClick`为`true`，使得点击行头会默认展开子行。`renderExpander`函数负责动态生成展开/收缩按钮，并在有子数据时渲染。当你点击行头，`toggleExpansion`会被调用来切换当前行的展开状态。