Таблицы данных Vuetify: выборка данных при расширении строки - PullRequest
Новая
       41

Таблицы данных Vuetify: выборка данных при расширении строки

1 голос
/ 02 апреля 2020

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

В настоящее время я извлекаю все заказы со всеми образцами, но загрузка всей информации занимает слишком много времени.

Таким образом, вместо извлечения всех образцов для каждого заказа, когда я раскрываю строку, я хочу иметь возможность выполнить вызов API, чтобы получить образцы, которые должны отображаться в расширенном разделе для этого конкретного заказа.

Я исследовал все, что мог, и зашел в тупик. Вот где я сейчас нахожусь: 

<v-data-table
  :headers="orders_headers"
  :items="orders"
  show-expand
  :single-expand="true"
  :expanded.sync="expanded"
>

  <!-- Expand Buttons -->
  <template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
    <v-btn @click="expand(true)" v-if="!isExpanded">Expand</v-btn>
    <v-btn @click="expand(false)" v-if="isExpanded">close</v-btn>
  </template>

  <!-- Expanded Data -->
  <template v-slot:expanded-item="{ headers, item }">
    <td :colspan="headers.length">

      <table v-for="(sample, index) in item.samples" :key="index">
        <tr>
          <th>Sample Acc</th>
          <td>{{ sample.sample_accession }}</td>
        </tr>
        <tr>
          <th>Sample Status</th>
          <td>{{ sample.sample_status }}</td>
        </tr>
      </table>

    </td>
  </template>
</v-data-table>

Я думаю, что, возможно, понял это при написании этого

Когда я печатал это, я понял, что мне, вероятно, нужно сделать. Мне нужно добавить вызов метода к кнопке раскрытия, затем в этом методе установить результаты на expandedSamples и заменить на него item.samples.

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

Бонус

Кто-нибудь знает, есть ли способ подключиться к событию расширения без замены по умолчанию значки / функциональность или способ включить оригинальные значки / функциональность при использовании v-slot:item.data-table-expand?

В настоящее время, когда я использую v-slot:item.data-table-expand, я должен добавить кнопки обратно, и я теряю шевроны и анимации.

Ответы [ 2 ]

1 голос
/ 02 апреля 2020

Для будущих читателей, сталкивающихся с той же проблемой, используйте событие @item-expanded таблицы данных, чтобы лениво загружать детали элемента (или дочерние данные) по требованию. Подключите событие item-expanded к методу (например, loadDetails), который загружает данные, а затем объединяет ответ в массив исходных элементов.

Вот пример ... 

  <v-data-table
    :headers="headers"
    :items="items"
    show-expand
    single-expand
    item-key="name"
    :search="search"
    @item-expanded="loadDetails">
    <template v-slot:expanded-item="{ headers, item }">
        <td :colspan="headers.length">
           <table v-for="(sample, index) in items.samples" :key="index">
            <tr>
              <th>Sample Acc</th>
              <td>{{ sample.sample_accession }}</td>
            </tr>
           </table>
        </td>
    </template>
  </v-data-table>

  methods: {
    loadDetails({item}) {
        axios.get('http.../' + item.id)
            .then(response => {
              item.samples = response.data[0]
        })
    }
  }

https://codeply.com/p/d5XibmqjUh

0 голосов
/ 02 апреля 2020

Вот базовое c решение моей проблемы. 

<v-data-table
  :headers="orders_headers"
  :items="orders"
  show-expand
  :single-expand="true"
  :expanded.sync="expanded"
>

  <!-- Expand Buttons -->
  <template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
    <v-btn @click="expand(true); getSamples(item.id)" v-if="!isExpanded">Expand</v-btn>
    <v-btn @click="expand(false)" v-if="isExpanded">close</v-btn>
  </template>

  <!-- Expanded Data -->
  <template v-slot:expanded-item="{ headers, item }">
    <td :colspan="headers.length">

      <table v-for="(sample, index) in expandedOrderDetails" :key="index">
        <tr>
          <th>Sample Acc</th>
          <td>{{ sample.sample_accession }}</td>
        </tr>
        <tr>
          <th>Sample Status</th>
          <td>{{ sample.sample_status }}</td>
        </tr>
      </table>

    </td>
  </template>
</v-data-table>

<script>
methods: {
  getSamples(orderId) {
    // Perform API call
    this.expandedOrderDetails = response.data;
  },
}
</script>

После многих часов разработки наш руководитель проекта решил, что он хочет, чтобы каждая строка соотносилась с каждым образцом, а не с заказами. Так что расширение больше не нужно.

...