el-table嵌套二级表格

### Element UI 中 `el-table` 实现嵌套二级表格

为了实现在 Element UI 的 `el-table` 组件中显示嵌套的子表格，可以采用树形结构的数据展示方式。通过设置特定属性并编写相应的逻辑来控制子表格的展开与折叠。

#### 数据准备
定义具有层次关系的数据集，在每条记录下附加一个名为 `children` 或其他自定义名称的数组字段用来存储该节点下的子项列表[^1]：

[
  {
    "id": 1,
    "name": "Parent Row",
    children: [
      {"id": 2, "name": "Child Row"},
      {"id": 3, "name": "Another Child"}
    ]
  }
]

#### HTML 结构
创建基础表格模板，并利用插槽功能插入额外的内容区域用于渲染子级表格。注意要指定唯一的键名作为每一行唯一标识符以便于操作具体某一行的状态变化[^2]:

<template>
  <div class="table-container">
    <!-- 外层父级表格 -->
    <el-table :data="outerData" style="width: 100%" @row-click="handleRowClick">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>

      <!-- 插入子表格的位置 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <inner-table :parent-id="props.row.id"/>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

#### JavaScript 部分
引入 Vue.js 和 Element UI 库之后，在脚本部分声明内部组件 `<InnerTable>` 来负责呈现子表格的具体样式和行为；同时为外部容器添加点击事件监听器以切换对应行是否处于扩展状态[^3]:

<script>
import InnerTable from './components/InnerTable.vue';

export default {
  components: { InnerTable },
  
  data() {
    return {
      outerData: [], // 父级表格数据源
      expandedRows: new Set(), // 记录当前已展开的行ID集合
    };
  },

  methods: {
    handleRowClick(row) {
      const id = row.id;
      
      if (this.expandedRows.has(id)) {
        this.$refs.outerTable.toggleRowExpansion(row);
        this.expandedRows.delete(id);
      } else {
        this.$refs.outerTable.toggleRowExpansion(row);
        this.expandedRows.add(id);
      }
    }
  }
};
</script>

#### 子表格组件 (`InnerTable`)
单独封装成一个新的Vue组件文件，接收来自父组件传递过来的相关参数（如 parentId），以此为基础查询获取对应的子表数据并完成最终视图构建工作:

<!-- ./components/InnerTable.vue -->
<template>
  <el-table :data="childData" border stripe>
    <el-table-column property="subName" label="子项名称"></el-table-column>
    <el-table-column property="value" label="数值"></el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ['parentId'],
  
  computed: {
    childData() {
      // 根据实际业务需求调整此处逻辑
      return this.getParentChildren(this.parentId);
    }
  },

  methods: {
    getParentChildren(parentId){
      // 模拟异步请求或其他形式的数据处理过程...
      let result = [];
      switch(parseInt(parentId)){
        case 1:
          result.push({ subName:'SubItem A', value:9 });
          break;
        ...
      }
      return result;
    }
  }
}
</script>

上述代码片段展示了如何基于Element UI框架搭建带有可伸缩特性的多层级表格布局方案。此方法不仅限于两层结构，还可以进一步拓展至更复杂的场景之中。