vue3_element_demo1/demo/el-table/views/Table_Demo14.vue

<template>
<el-table :data="tableData">
  <el-table-column type="expand">
    <template #default="props">
      <div>
        <p>State: {{ props.row.state}}</p>
        <p>City: {{ props.row.city}}</p>
        <p>Address: {{ props.row.address}}</p>
        <p>Zip: {{ props.row.zip}}</p>
        <h3>Family</h3>
        <el-table :data="props.row.family">
          <el-table-column prop="name" label="Name"></el-table-column>
          <el-table-column prop="state" label="State"></el-table-column>
          <el-table-column prop="city" label="City"></el-table-column>
          <el-table-column prop="address" label="Address"></el-table-column>
          <el-table-column prop="zip" label="Zip"></el-table-column>
        </el-table>
      </div>
    </template>
  </el-table-column>
  <el-table-column prop="date" label="Date"></el-table-column>
  <el-table-column prop="name" label="Name"></el-table-column>
</el-table>
</template>

<script>
export default {
  name: "TableDemo14",
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
          family: [
            {
              name: 'Jerry',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Spike',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Tyke',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
          ],
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
          family: [
            {
              name: 'Jerry',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Spike',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Tyke',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
          ],
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
          family: [
            {
              name: 'Jerry',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Spike',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Tyke',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
          ],
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
          family: [
            {
              name: 'Jerry',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Spike',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Tyke',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
          ],
        },
        {
          date: '2016-05-08',
          name: 'Tom',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
          family: [
            {
              name: 'Jerry',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Spike',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Tyke',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
          ],
        },
        {
          date: '2016-05-06',
          name: 'Tom',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
          family: [
            {
              name: 'Jerry',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Spike',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Tyke',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
          ],
        },
        {
          date: '2016-05-07',
          name: 'Tom',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
          family: [
            {
              name: 'Jerry',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Spike',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
            {
              name: 'Tyke',
              state: 'California',
              city: 'San Francisco',
              address: '3650 21st St, San Francisco',
              zip: 'CA 94114',
            },
          ],
        },
      ]
    }
  }
}
</script>

<style scoped>

</style>