【ElementUI】el-table对象数组嵌套对象数组

Question

常使用elementUI的el-table时，其绑定的数据是一个数组，如果这个数组中有一个对象，直接去渲染则无法实现

Answer 1

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7636052
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：ElementUI中el-table想实现多行表头怎么实现(el-table实现多行表头)
• 除此之外, 这篇博客: ElementUI中表格el-table滚动条样式的优化中的 ElementUI官方文档提供的table表格的滚动条样式不美观，简单封装之后的效果图 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 

• 以下回答由chatgpt基于相关博客总结生成:

  我可以参考以下代码示例来实现el-table对象数组中嵌套的对象数组的渲染： 数据结构：

  [
    {
      id: 1,
      name: 'Tom',
      details: [
        { age: 20, gender: 'Male' },
        { age: 21, gender: 'Female' }
      ]
    },
    {
      id: 2,
      name: 'Jerry',
      details: [
        { age: 22, gender: 'Male' },
        { age: 23, gender: 'Female' }
      ]
    }
  ]
  

  模板代码：

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column label="Details">
      <template slot-scope="scope">
        <el-table :data="scope.row.details" style="width: 100%">
          <el-table-column prop="age" label="Age"></el-table-column>
          <el-table-column prop="gender" label="Gender"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
  

  在el-table-column中使用template来嵌套一个子el-table，通过scope.row.details可以获取到当前行的details数据，实现数据的嵌套展示。在子el-table中的el-table-column中设置prop来指定表格列展示的数据。