Bootstrap Vue table: показать детали при щелчке строки

Попытка добиться отличного от документирования опыта: показ подробностей строки осуществляется не нажатием кнопки, а нажатием строки. А документация - это отсутствие деталей о том, как сделать это иначе, как в примерах.

<b-table
    v-if="tableIsReady"
    :items="deals"
    :fields="fields" 
    :per-page="recordsPerPage"
    no-local-sorting 
    @sort-changed="sorting" 
    responsive 
    flex 
    striped 
    hover
    @row-clicked="expandAdditionalInfo" 
  > 
   <template slot="row-details" slot-scope="row">
    <b-card>
      <h1>hello</h1>
    </b-card>
  </template>
 </b-table>

Вот моя функция, но я думаю, что она вообще не работает

expandAdditionalInfo(row) {
  row.showDetails();
}
Источник

1 ответ

Решение

Как уже упоминалось в разделе поддержки сведений о строках документации таблицы Bootstrap Vue, вы можете изменить _showDetails свойство элемента строки:

Если запись имеет свойство _showDetails, установленное в значение true, и слот области сведений о строке существует, новая строка будет отображаться непосредственно под элементом с отображенным содержимым слота области сведений о строке.

В вашем случае вы хотели бы что-то вроде:

expandAdditionalInfo(row) {
  row._showDetails = !row._showDetails;
},

Как показано в этом коде

Источник

Трудно найти... но просто добавьте это:

@row-clicked="item=>$set(item, '_showDetails', !item._showDetails)"

Объяснение

В $set сохраняет реактивность, даже если _showDetails не существовало.

Жалко, что объект строки недоступен, поэтому toggleDetails здесь не вариант.

Источник
Другие вопросы по тегам