el-table 列里面嵌套 el-table

这种情况下，可能需要使用el-table的expand插槽，并在插槽内再嵌套el-table组件。 另外，需要注意数据结构的组织。每一层的数据可能需要包含子数据的数组，例如children字段。同时，分页功能可能在子表格中需要单独...

### 实现 Element UI 中 el-table 组件内部嵌套另一个 el-table 为了实现在 `el-table` 组件中嵌套另一个 `el-table`，可以采用自定义模板的方式，在父级表格的某一列中渲染子表格。具体实现如下： #### HTML 结构 ```html <template> <div> <!-- 外层表格 --> <el-table :data="outerTableData"> <el-table-column prop="name" label="外层表头"></el-table-column> <!-- 自定义列用于显示内层表格 --> <el-table-column label="详情"> <template slot-scope="scope"> <!-- 内层表格 --> <el-table v-if="showInner(scope.row)" :data="innerTableData[scope.$index]" style="width: 100%"> <el-table-column prop="detailName" label="内层表头"></el-table-column> <el-table-column prop="value" label="数值"></el-table-column> </el-table> </template> </el-table-column> </el-table> </div> </template> ``` #### JavaScript 部分 ```javascript <script> export default { data() { return { outerTableData: [ { name: "项目A", details: [{ detailName: "任务1", value: 10 }] }, { name: "项目B", details: [{ detailName: "任务2", value: 20 }, { detailName: "任务3", value: 30 }] } ], innerTableData: [] }; }, methods: { showInner(row) { this.innerTableData[row.index] = row.details; return true; // 控制是否显示内层表格 } }, created() { // 初始化时处理数据映射关系 this.outerTableData.forEach((item, index) => { this.$set(this.innerTableData, index, item.details); }); } }; </script> ``` 上述代码展示了如何在外层表格的一列里放置一个条件性的内层表格[^1]。 #### 关键点说明 - 使用 `<template>` 标签结合 `slot-scope` 属性来创建作用域插槽，从而允许访问当前行的数据。 - 利用 `v-if` 来控制何时渲染内层表格，防止不必要的重绘和性能损耗。 - 数据绑定方面，通过计算属性或方法动态调整内外两层表格之间的关联逻辑。