Vue3 Antd 父子嵌套子表格

Vue3结合Ant Design（AntD）构建父子嵌套子表格通常是为了展示层次结构的数据，比如组织架构、商品分类等。这种设计通过`<template>`组件模板、Vuex状态管理以及AntD提供的Table和Tree组件来实现。

1. 定义数据模型：首先，你需要有一个树形的数据结构，每个节点包含id、name、children等属性。

2. 使用AntD Table：在父组件中，使用`<a-table>`渲染一个基础的表格，并通过`<a-tree>`组件生成一个可展开收缩的树形视图，点击节点可以展开显示其子表格。

3. 子表格嵌套：当用户点击某个节点时，父组件会触发一个事件，传递当前节点的数据到子组件。子组件内部，通过`<a-table>`展示该节点的详细信息，包括子节点的数据。

4. 状态管理：使用Vuex来管理整个应用的状态，特别是表格的数据。当数据更新时，状态会同步到所有依赖它的组件。

5. 事件总线：如果需要跨级通信，你可以使用Vue的Event Bus来传递数据和指令。

<!-- 父组件示例 -->
<template>
  <div>
    <a-tree ref="tree" :data="treeData" @expand="handleExpand" />
    <child-table :table-data.sync="currentNodeData" v-if="isExpanded"></child-table>
  </div>
</template>

<script>
import ChildTable from './ChildTable.vue';
// ...

export default {
  components: { ChildTable },
  data() {
    return {
      treeData: [],
      currentNodeData: {},
      isExpanded: false,
    };
  },
  methods: {
    handleExpand(node) {
      this.isExpanded = node.expanded;
      if (node.children) {
        // 更新状态并派发给子表
        this.$set(this.currentNodeData, 'children', node.children);
      }
    },
  },
};
</script>