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

<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();
}
21
anton zlydenko 14 Сен 2018 в 11:04

2 ответа

Лучший ответ

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

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

В вашем случае вам нужно что-то вроде:

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

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

8
Tomhah 16 Сен 2018 в 11:06

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

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

Объяснение

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

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

1
estani 3 Ноя 2019 в 19:06