quasar2 table 可展开多行，且数据在展开行中

quasar2 table Expending rows-可展开多行，且数据在展开行中

实现可展开多行，且数据在展开行中

代码：
template：

<template>
  <div class="q-pa-md">
  <q-table
      title="Treats"
      :rows="tableData"
      :columns="columnData"
      row-key="name"
      hide-bottom
    >
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th auto-width />
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>

      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td auto-width>
            <q-btn
              size="sm"
              color="accent"
              round
              dense
              @click="props.expand = !props.expand"
              :icon="props.expand ? 'remove' : 'add'"
            />
          </q-td>
          <q-td colspan="100%">
            <div class="text-left">
              {{ props.row.name }}
            </div>
          </q-td>
        </q-tr>
        <q-tr
          :props="props"
          v-show="props.expand"
          v-for="child in props.row.children"
          :key="child.calories"
        >
          <q-td /><q-td />
          <q-td key="calories" :props="props">
            {{ child.calories }}
          </q-td>
          <q-td key="fat" :props="props">
            {{ child.fat }}
          </q-td>
          <q-td key="carbs" :props="props">
            {{ child.carbs }}
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>

script:(typescript)

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const columns = [
      {
        name: 'name',
        required: true,
        label: 'Dessert (100g serving)',
        align: 'left',
        field: 'name',
        sortable: true
      },
      {
        name: 'calories',
        align: 'left',
        label: 'Calories',
        field: 'calories',
        sortable: true
      },
      {
        name: 'fat',
        label: 'Fat (g)',
        field: 'fat',
        align: 'left',
        sortable: true
      },
      { name: 'carbs', label: 'Carbs (g)', align: 'left', field: 'carbs' }
    ]

    const rows = [
      {
        name: 'Frozen Yogurt',
        children: [{
            calories: 159,
            fat: 6.0,
            carbs: 24
          },
          {
            calories: 518,
            fat: 26.0,
            carbs: 65
          },
          {
            calories: 452,
            fat: 25.0,
            carbs: 51
          }]
      },
      {
        name: 'Ice cream sandwich',
        children: [{
            calories: 237,
            fat: 9.0,
            carbs: 37
          }]
      },
      {
        name: 'Eclair',
        children: [{
            calories: 262,
            fat: 16.0,
            carbs: 23
          }]
      },
      {
        name: 'Cupcake',
        children: [{
            calories: 305,
            fat: 3.7,
            carbs: 67
          }]
      },
      {
        name: 'Gingerbread',
        children: [{
            calories: 356,
            fat: 16.0,
            carbs: 49
          }]
      }]
    const columnData = ref(columns)
    const tableData = ref(rows)
    return {
      columnData,
      tableData
    }
}
})
</script>