页面中多个表格的 vue bootstrap 分页

问题描述 投票:0回答:0

我在一个页面中有多个引导表。相同的 json 数据循环显示为不同的数据表,并带有手风琴分离。当我尝试对其进行分页时,只发布下一页。当我们点击下一页时,所有表格都移动到下一页。

                ```
         <b-collapse
          :id="`accordion-${user.id}`"
          visible
          accordion="my-accordion"
          role="tabpanel"
        >
          <b-card-body
            v-for="propertyManagement in user.property_managements"
            :key="propertyManagement.id"
          >
            <p class="card-title-desc">
              <b>{{ $t('Building') }} : </b
              >{{ propertyManagement.building_name }}
            </p>
            <b-card-text>
              <div class="table-responsive mb-0">
                <b-table
                  :items="propertyManagement.new_notifications"
                  :fields="fields"
                  :per-page="perPage"
                  :current-page="currentPage"
                  :id="'notification-table' + propertyManagement.id"
                  responsive="sm"
                  :busy="isBusy"
                >
                ....
                </b-table>
                <b-pagination
                        v-model="currentPage"
                        :total-rows="propertyManagement.new_notifications.length"
                        :per-page="perPage"
                        :aria-controls="'notification-table' + propertyManagement.id"
                        pills>
                </b-pagination>```

所以,这里只使用了一个 b 表,循环显示“propertyManagement.new_notifications”日期以显示手风琴分离的多个数据表。 currentPage 初始定义为 1

我像上面的代码一样使用了 b-pagination,除了下一页之外一切正常,因为下一页反映在所有数据表中。

有没有办法只显示选中的下一页,其余全部设置为默认第一页?

datatable pagination bootstrap-vue nuxtjs3
© www.soinside.com 2019 - 2024. All rights reserved.