vue b-table настроить разбиение на страницы для отображения всех строк - PullRequest
Новая
       12

vue b-table настроить разбиение на страницы для отображения всех строк

0 голосов
/ 07 мая 2020

Я использую bootstrap - vue. Для разбивки на страницы b-таблицы я использовал компонент 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]

};

}

И если я использую «показать все» в поле параметров, он покажет все строки, но не будет правильно устанавливать разбиение на страницы только для одной доступной страницы.

текущий дисплей

Я хочу добиться отображения правильной опции разбивки на страницы (только одна страница) или иметь возможность скрыть всю разбивку на страницы, когда была выбрана опция «показать все».

Как я могу это получить готово?

1 Ответ

0 голосов
/ 07 мая 2020

Самый простой способ - установить для опции show all ДЕЙСТВИТЕЛЬНО большое число. Для этого вы можете использовать константу Number.MAX_SAFE_INTEGER, которая содержит число 9007199254740991.

Которые, как я полагаю, вы не достигнете в строках.

Если вы хотите полностью скрыть разбиение на страницы, когда выбран параметр show all, вы можете вместо этого установить значение 0 . Это также покажет все строки.

Затем вы добавляете v-if к своей разбивке на страницы <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>
...