0

在我的 Vue 应用程序中使用 vue-infinite-loading 组件时出现问题

  1. 当我打开可折叠组件时，它将运行 vue-infinite-loading 并在第一次加载后不滚动也将再次运行 vue-infinite-loading，尝试更改距离并使用 force-use-infinite-wrapper 但仍然相同的结果. 有什么帮助吗？

这是我的示例代码：

<template>
  <div
    v-if="stateAnalyticsData.length"
    class="table-responsive tbl-analytics-results accordion"
    role="tablist"
  >
    <table
      **v-for="(data, keys) in stateAnalyticsData"
      :key="keys"**
      class="table table-borderless"
    >
      <tbody
        v-if="
          showOverDueLeadBrokers ? data.value.totalOverdueLeadsCount > 0 : true
        "
      >
        <b-card no-body class="mt-0">
          <tr>
            <td class="td-wide pl-0">
              <div class="h-details" role="tab">
                <!-- more info  -->
                <more-info-caret
                  v-b-toggle="`accordion-${data.key}`"
                  :more-infor-load="{ id: data.key }"
                  flag="analytics"
                />
                <!-- <span
                  v-if="loadingItemIds.includes(data.key)"
                  class="spinner-border spinner-border-sm"
                /> -->
                <div class="name-details d-flex align-items-center">
                  <p class="mb-0 analytic-state">
                    Analytics of State:
                  </p>
                  <h5 class="broker-name ml-2 mb-0">
                    {{ data.key }}
                  </h5>
                </div>
              </div>
            </td>
            <td>
              {{ data.value.averageResponseTime | durationFilter }}
              <i class="mdi mdi-information" />
            </td>
          </tr>
        </b-card>

        <!-- more info collapse  -->
        **<b-collapse
          :id="'accordion-' + data.key"
          accordion="my-accordion"
          role="tabpanel"
          infinite-wrapper
        >**
          **<tr v-for="sub in result" :key="sub.id">**
            <b-card
              v-if="
                (!showOverDueLeadBrokers && sub.state === data.key) ||
                  (showOverDueLeadBrokers &&
                    sub.state === data.key &&
                    sub.totalOverdueLeadsCount > 0)
              "
              class="mt-0"
              @click="goToBLeadFunc(sub.id)"
            >
              
              <td>
                {{ sub.averageResponseTime | durationFilter }}
                <i class="mdi mdi-information" />
              </td>
            </b-card>
          </tr>
          **<div style="overflow: auto;">
            <infinite-loading
              v-if="infiniteId && infiniteId === data.key"
              :id="data.key"
              ref="infiniteLoading"
              spinner="circles"
              :identifier="infiniteId"
              force-use-infinite-wrapper="true"
              @infinite="
                infiniteHandler($event, {
                  key: data.key,
                  brokersCount: data.value.brokersCount
                })
              "
            />
          </div>**
        </b-collapse>
      </tbody>
    </table>
  </div>
</template>

如果您能回答上述任何问题，那就太好了！

4

0 回答 0