Question

我正在使用bootstrap-vue。对于b表的分页，我将b分页组件与模板的以下代码一起使用：

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

};

}

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

current display

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

我该怎么做？

Answer 1

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

我可以肯定地猜到您不会成行到达。

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

然后，可以添加一个v如果您的分页{1} {}，这将其隐藏该选项被选中的时候。

<b-pagination v-if="perPage !== 0">

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: []
    }
  }
})

Vue B表自定义分页以显示所有行

1 个答案: