在 Quasar Table 中设置内容位置

Question

我正在使用 Vuejs 3 和 Quasar。 我正在使用Quasar table 组件，其中一列（名称）有一个Quasar tree，用户可以展开：

如您所见，当树展开时，其他列的内容位于行的中间，但我希望它们保持在顶部（基本上与“测试 1”对齐）。有没有办法做到这一点？

这是我目前的代码：

     <q-table
      v-model:selected="selected"
      :rows="rows"
      :columns="columns"
      row-key="id"
      selection="multiple"
      virtual-scroll
      :rows-per-page-options="[0]"
      hide-bottom
  >
    <template #body="props">
      <q-tr
          v-ripple
          :props="props"
          style="position:relative;"
      >
        <q-td key="selected">
          <q-checkbox
              v-model="props.checkbox"
          />
        </q-td>

        <q-td
            :key="column1"
            :props="props"
        >
          <q-toggle
              v-model="props.switch"
              dense
          />
        </q-td>

        <q-td
            :key="column2"
            :props="props"
        >
          {{ props.row.column2Data }}
        </q-td>

        <q-td
            :key="column3"
            :props="props"
        >
          <div class="q-pa-md q-gutter-sm">
            <TreeObject :data="props.row.data"/>
          </div>
        </q-td>

        <q-td
            :key="column4"
            :props="props"
        >
          Test
        </q-td>
      </q-tr>
    </template>
  </q-table>

Answer 1

也许您可以使用 flexbox 将每列的内容垂直对齐到顶部。所以 display: flex;正义内容：弹性开始；弹性方向：列；

我没试过，但我会这样做。