多级表头 ​

<template>
  <TableGenerator ref="RefTableGenerator" v-bind="{ ...tableAttrs }" />
</template>

<script lang="tsx" setup>
import { TableGenerator } from 'element-plus-generator'
import type { TableAttrs, RefTableGenerator } from 'element-plus-generator/lib/type'
import { ref, onMounted } from 'vue'

const RefTableGenerator = ref<RefTableGenerator>()
const tableAttrs = ref<TableAttrs>({
  data: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      city: 'Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      city: 'Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      city: 'Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      city: 'Los Angeles',
    },
  ],
  tableOption: [
    {
      prop: 'date',
      label: 'Date',
    }, {
      label: 'Delivery Info',
      children: [
        {
          prop: 'name',
          label: 'Name',
        }, {
          label: 'Address Info',
          children: [
            {
              prop: 'address',
              label: 'Address',
            }, {
              prop: 'city',
              label: 'City',
            },
          ]
        },
      ]
    },
  ]
})

onMounted(() => {
  console.log(RefTableGenerator.value());
})
</script>