vue b-table 모든 행을 표시하도록 페이지 번호 사용자 지정

vue b-table 모든 행을 표시하도록 페이지 번호 사용자 지정

bootstrap-vue를 사용하고 있습니다.b-table의 pagination에는 템플릿에 다음 코드를 가진 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페이지만)을 달성하거나 "모두 표시" 옵션을 만들었을 때 페이지 전체를 숨길 수 있습니다.

어떻게 하면 좋을까요?

가장 손쉬운 방법은,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>

언급URL : https://stackoverflow.com/questions/61655076/vue-b-table-customize-pagination-to-show-all-rows