Как сделать раскрывающуюся таблицу?

Question

[stimul777]

Всем привет, как сделать во Vuetify раскрывающуюся таблицу? Чтобы при клике на строчку, она раскрывалась и в ней была другая таблица?

Answer 1

[0xD34F]

Используйте слот expanded-item:

<v-data-table
  :headers="mainTableHeaders"
  :items="mainTableItems"
  item-key="mainTableItemKey"
  show-expand
>
  <template #expanded-item="{ headers, item }">
    <td :colspan="headers.length">
      <v-data-table
        :headers="nestedTableHeaders"
        :items="item.nestedTableItems"
      ></v-data-table>
    </td>
  </template>
</v-data-table>

https://jsfiddle.net/krg8ac7s/

UPD. Как-то пропустил:

при клике на строчку

Убираем show-expand, добавляем обработчик клика, где отображение дополнительного контента будет переключаться вручную:

methods: {
  onRowClick(item, row) {
    row.expand(!row.isExpanded);
  },
  ...

<v-data-table
  @click:row="onRowClick"
  ...

Answer 2

[alaskafx]

Привет, v-show или v-if в помощь.
Создаёшь, к примеру table: false, а в v-if для самой раскрывашки делаешь v-if='table', а после добавь метод с обработчиком события на нажатие того, что надо)

Comments

[alaskafx]

И так далее создаёшь и создаёшь...

[stimul777]

alaskafx, так нужно сделать прям внутри таблицы) я что-то не совсем понимаю, как засунуть это под строку, на которую кликнули

[alaskafx]

stimul777, так внутри таблицы и делаешь) Вот делаешь так:
у тебя есть data в которой есть
table: 0.
А на всяких строчках делаешь обработчик на @click='table = 1' или с другим числом.
На твоих таблицах ты кидаешь проверку через v-if, к примеру v-if='table == 1'