Блог

При нажатии кнопки открываются сведения о строке. Когда открывается другая деталь строки, я хочу убедиться, что открытые детали закрыты. Деталь одной строки должна оставаться открытой

пример скриншота

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

     <b-table
  show-empty
  small
  stacked="md"
  :items="items"
  :fields="fields"
  :current-page="currentPage"
  :per-page="perPage"
  :filter="filter"
  :filter-included-fields="filterOn"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
  :sort-direction="sortDirection"
  @filtered="onFiltered"
>
  <template #cell(name)="row">
    {{ row.value.first }} {{ row.value.last }}
  </template>

  <template #cell(actions)="row">
    <b-button size="sm" @click="info(row.item, row.index, $event.target)" class="mr-1">
      Info modal
    </b-button>
    <b-button size="sm" @click="row.toggleDetails">
      {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
    </b-button>
  </template>

  <template #row-details="row">
    <b-card>
      <ul>
        <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
      </ul>
    </b-card>
  </template>
</b-table>
 

У меня нет пользовательского кода компонента, такого как b-table , но вы хотели бы сделать следующее

https://vuetifyjs.com/en/components/data-tables/#expandable-rows

1. В основном отдельный массив, отслеживающий, какие строки в данный момент открыты.
2. Предполагая b-table extends v-data-table , пройдите через :expanded свойство и добавьте массив отслеживания.
3. При открытии деталей установите для массива значение [] , которое должно закрыть все.
4. И сразу после этого установите индекс строки, которую вы хотите открыть, равным 1.

Смотрите приведенную выше ссылку Vuetify для примера того, как они это делают, не забудьте включить опцию «однократного развертывания».