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

Posted 2023-02-22

【中文标题】vue b-table 自定义分页显示所有行

【英文标题】：vue b-table customize pagination to show all rows

【发布时间】：2020-08-22 14:08:15

【问题描述】：

我正在使用 bootstrap-vue。对于 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]

;

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

current display

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

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

【参考方案1】：

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

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

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

然后，添加V-IF到您的Pagination <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: []
    
  
)

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

【讨论】：

非常感谢，这正是我想要的！我按照您的建议在模板中使用了 v-if 并将我的选项更改为：pageOptions: [5, 10, 20, 50, value: 0, text: "show all" ],