@stimul777

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

Всем привет, как сделать во Vuetify раскрывающуюся таблицу? Чтобы при клике на строчку, она раскрывалась и в ней была другая таблица?
609ab12d84a30059258901.png
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Используйте слот 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"
  ...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
alaskafx
@alaskafx
Не .do Frontend
Привет, v-show или v-if в помощь.
Создаёшь, к примеру table: false, а в v-if для самой раскрывашки делаешь v-if='table', а после добавь метод с обработчиком события на нажатие того, что надо)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы