element-ui el-table 一对多

### 实现 Element UI 中 `el-table` 组件的一对多关系展示 在实际项目中，经常需要使用 `el-table` 展示一对多的关系数据。这种场景下，可以通过嵌套子表格或者展开行的方式来实现。 #### 方法一：嵌套子表格 可以利用 `el-table-column` 的 `type="expand"` 来实现父子结构的展示。以下是具体实现方式： ```vue <template> <el-table :data="parentData" style="width: 100%"> <!-- 定义可展开列 --> <el-table-column type="expand"> <template slot-scope="props"> <el-table :data="props.row.children" style="width: 100%"> <el-table-column prop="childName" label="子项名称"></el-table-column> <el-table-column prop="childValue" label="子项值"></el-table-column> </el-table> </template> </el-table-column> <!-- 父项字段 --> <el-table-column prop="name" label="父项名称"></el-table-column> <el-table-column prop="value" label="父项值"></el-table-column> </el-table> </template> <script> export default { data() { return { parentData: [ { name: "父项A", value: "值A", children: [ { childName: "子项A1", childValue: "值A1" }, { childName: "子项A2", childValue: "值A2" } ] }, { name: "父项B", value: "值B", children: [ { childName: "子项B1", childValue: "值B1" }, { childName: "子项B2", childValue: "值B2" } ] } ] }; } }; </script> ``` 这种方法适用于父子关系清晰且不需要频繁交互的场景[^1]。 --- #### 方法二：扁平化数据并配合插槽渲染 如果不想使用嵌套表格，也可以将数据扁平化处理，并通过自定义模板来区分父子关系。 ```vue <template> <el-table :data="flattenedData" style="width: 100%"> <el-table-column prop="level" label="层级"> <template slot-scope="scope"> {{ scope.row.level === 'parent' ? '父项' : '子项' }} </template> </el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="value" label="值"></el-table-column> </el-table> </template> <script> export default { data() { const rawData = [ { name: "父项C", value: "值C", children: [ { childName: "子项C1", childValue: "值C1" }, { childName: "子项C2", childValue: "值C2" } ] } ]; // 扁平化数据 const flattenedData = []; rawData.forEach(parent => { flattenedData.push({ level: "parent", name: parent.name, value: parent.value }); (parent.children || []).forEach(child => { flattenedData.push({ level: "child", name: child.childName, value: child.childValue }); }); }); return { flattenedData }; } }; </script> ``` 这种方式适合简单的父子关系展示，但不适合复杂的树形结构[^3]。 --- #### 方法三：结合 TreeTable 插件 对于更复杂的一对多关系（如树状结构），推荐使用第三方插件 `vue-treeselect` 或者基于 `el-table` 封装的 `TreeTable` 组件。这些工具能够更好地支持多层次嵌套和动态加载功能[^4]。 --- ### 总结 以上三种方法分别针对不同的业务需求提供了解决方案： - **嵌套子表格**：适合简单的一对多关系。 - **扁平化数据**：适合轻量级的父子关系展示。 - **TreeTable 插件**：适合深层次、大规模的数据展示。 每种方案都有其适用范围，在实际开发过程中可以根据具体情况选择合适的实现方式。