Bootstrap Vue table: показать детали при щелчке строки - PullRequest
Новая
       11

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

0 голосов
/ 14 сентября 2018

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

<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 Ответ

0 голосов
/ 16 сентября 2018

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

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

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

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

Как показано в этот код ручки

...