axios 验证数据表:展开行时提取数据

i5desfxk  于 2022-12-12  发布在  iOS
关注(0)|答案(2)|浏览(121)

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

我想我在写这篇文章的时候就想明白了
当我输入这些内容时,我意识到我可能需要做什么。我需要向expand按钮添加一个方法调用,然后在该方法中将结果设置为expandedSamples,并用它替换item.samples
在此期间,如果有人有更好的解决方案,我很乐意听到。否则,我会张贴我的解决方案,以防其他人试图尝试类似的东西。

奖金

有没有人知道,在使用v-slot:item.data-table-expand时,是否有一种方法可以在不替换默认图标/功能的情况下进入扩展事件,或者是否有一种方法可以包括原始图标/功能?
目前,当我使用v-slot:item.data-table-expand时,我必须重新添加按钮,我失去了V形和动画。

fruv7luv

fruv7luv1#

为了方便将来遇到同样问题的读者,请使用data-table的@item-expanded事件来延迟加载项目详细信息(或子数据)。将item-expanded事件挂钩到加载数据的方法(例如loadDetails),然后将响应合并到原始项目数组中。
这里有一个例子...
第一个
https://codeply.com/p/d5XibmqjUh

j8ag8udp

j8ag8udp2#

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

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

经过数小时的开发,我们的项目领导决定让每一行都与每个样本相关,而不是与订单相关,因此不再需要扩展。

相关问题