Vuetify 数据表：展开行时获取数据

Question

我有一个带有可扩展行的 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

时，我必须重新添加按钮，并且丢失了 V 形和动画。

Answer 1

为了未来面临同样问题的读者的利益，请使用数据表的

@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

Answer 2

这是我的问题的基本解决方案。

<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>

经过多个小时的开发，我们的项目负责人决定他希望每一行与每个样本相关，而不是与订单相关。所以不再需要扩展。

Answer 3

不错的解决方案也可以是在创建 OrderDetail 组件时在其内部加载数据：

<template #expanded-row="{ columns, item }">
    <tr>
        <td :colspan="columns.length">
            <order-detail :id="item.id"></order-detail>
        </td>
    </tr>
</template>