时间戳

首页 > 解决方案 > vue b-table 自定义分页显示所有行

vue.js - vue b-table 自定义分页显示所有行

问题描述

我正在使用引导程序。对于 b-table 的分页，我使用 b-pagination 组件和以下模板代码：

<div class="description perpage">Per page</div>

  <b-form-select class="numPerPage" v-model="perPage" :options="pageOptions"></b-form-select>

  <b-col sm="7" md="6" class="pagination">
    <b-pagination
      :total-rows="totalRows"
      v-model="currentPage"
      :per-page="perPage"
      align="fill"
      class="my-0"
      aria-controls="my-table"
      last-number
    ></b-pagination>
  </b-col>

  <div class="description found">Found: {{this.totalRows}}</div>
</div>

<b-table
  id="my-table"
  show-empty
  striped
  hover
  sticky-header="true"
  :items="filteredItems"
  :fields="fields"
  :per-page="perPage"
  :current-page="currentPage"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc">

以及脚本部分的以下内容：

data() {
return {
  totalRows: 1,
  perPage: 10,
  currentPage: 1,
  sortBy: "name",
  sortDesc: false,
  pageOptions: [5, 10, 20, 50, "show all"],
  fields: [..myfields]

};

}

如果我在选项字段中使用“全部显示”，它将显示所有行，但它不会正确地将分页设置为仅一个可用页面。

当前显示

我想实现显示正确的分页选项（只有一页）或者能够在“显示全部”选项时隐藏整个分页。

我怎样才能完成这项工作？

标签： vue.jsvuexbootstrap-vue

解决方案

最简单的方法是将您的show all选项设置为一个非常高的数字。为此，您可以使用Number.MAX_SAFE_INTEGER包含数量的常量9007199254740991。

我可以肯定地猜测你不会成排到达。

如果您想在show all选择选项时完全隐藏分页，您可以将值设置为0. 这也将显示所有行。

Then you add a v-if to your pagination <b-pagination v-if="perPage !== 0">, which will hide it when that option is selected.

new Vue({
  el: '#app',
  created() {
    for (let i = 0; i < 1000; i++) {
      this.items.push({
        id: i + 1
      });
    }
  },
  computed: {
    totalRows() {
      return this.items.length
    }
  },
  data() {
    return {
      perPage: 10,
      currentPage: 1,
      sortBy: "name",
      sortDesc: false,
      /* Number.MAX_SAFE_INTEGER = 9007199254740991 */
      pageOptions: [5, 10, 20, 50, {
        value: Number.MAX_SAFE_INTEGER,
        text: "show all"
      }],
      items: []
    }
  }
})
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <div class="description perpage">Per page</div>
  <b-form-select class="numPerPage" v-model="perPage" :options="pageOptions"></b-form-select>

  <b-pagination
    :total-rows="totalRows"
    v-model="currentPage"
    :per-page="perPage"
    align="fill"
    class="my-0"
    aria-controls="my-table"
    ></b-pagination>
  <div class="description found">Found: {{ this.totalRows }}</div>

  <b-table
    id="my-table"
    show-empty
    striped
    hover
    sticky-header="true"
    :items="items"
    :per-page="perPage"
    :current-page="currentPage"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc">
  </b-table>
</div>

推荐阅读