如何在元素UI表中显示嵌套单元格？

<template>
  <el-table :data="tableData">
    <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">
          <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          details: [
            { age: 25, gender: 'Male' },
            { age: 30, gender: 'Female' }
          ]
        },
        {
          name: 'Jane',
          details: [
            { age: 35, gender: 'Female' },
            { age: 40, gender: 'Male' }
          ]
        }
      ]
    };
  }
};
</script>