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时，我必须重新添加按钮，并且失去了尖角和动画效果。

- Josh

---

你走在正确的道路上。你应该捕获扩展事件并获取数据，然后填充项目。 - Radu Diță

希望能够得到关于奖励问题的答案。我只想改变chevron图标的颜色，但是我找不到v-slot:item.data-table-expand中原始代码的位置。 - Jonathan Lee

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

- Zim

---

谢谢您的回答。这正是我在寻找的内容。 - Josh

当我打开和关闭扩展面板时，它调用了我挂钩到@item-expanded的方法。有没有办法只在展开时调用我的方法？ - frlzjosh

这应该只在行被展开时起作用，它也会触发折叠行的事件。需要帮忙吗？@frlzjosh - undefined

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>

经过多个小时的开发，我们的项目负责人决定每一行应该与每个样本相关联，而不是订单。因此，扩展已不再必要。

- Josh