Vuetify Data Iterator + Data 테이블의 페이지당 행 항목 이해, 기본 페이지를 설정할 수 있는가?

Vuetify Data Iterator + Data 테이블의 페이지당 행 항목 이해, 기본 페이지를 설정할 수 있는가?

데이터 테이블용 Vuetify 문서 및 Data Iterator용 문서에서 관리되지 않음rows-per-page-items사용법과 그 선택사항들을 지지하고, 다른 장소에서 어떠한 설명도 찾을 수 없다.

구체적으로, 내가 알고 싶은 것은 페이지당 선택된 행의 양을 선택한 첫 번째 값이 아닌 기본값으로 설정하기 위해 언급된 소자를 사용할 수 있는지 여부다.

예를 들어 드롭다운 선택:

Items per page:  10
                [20] -> Selected by default
                 30
                 40

내가 할 수 있다는 것을 안다:

Items per page: [20] -> First, so will be selected by default
                 10
                 30
                 40

수행 중:

<v-data-iterator :rows-per-page-items="[20, 10, 30, 40]" ... />

그러나 위의 내용은 UX상으로는 그리 이상적이지 않다.

뷰에티시 2.0을 사용하는 모든 사용자는 다음과 같이 데이터 테이블의 바닥글 받침대를 사용해야 한다.

<v-data-table
  :headers="headers"
  :items="items"
  :footer-props="{
    'items-per-page-options': [10, 20, 30, 40, 50]
  }"
  :items-per-page="30"
  :search="search"
>

템플릿 구조를 사용하는 경우 다음과 같이 데이터 속성을 정의할 수 있다.

rowsPerPageItems: [10, 20, 30, 40],
pagination: {
    rowsPerPage: 20
},

구성 요소 태그 특성:

<v-data-iterator
    :rows-per-page-items="rowsPerPageItems"
    :pagination.sync="pagination"
    ... />

"paggination - 페이지당 행 수" 프로펠러 값은 기본값을 정의한다.

:footer-props="{
    itemsPerPageOptions:[10,20,30,-1]
}"

이것은 현재 최신 버전이다.바닥글 제안의 항목PerPageOptions 필드.

데이터 테이블의 경우

<v-data-table
        v-model="selected"
        :headers="headers"
        :items="items"
        select-all
        item-key="name"
        class="elevation-1"
        :rows-per-page-items="[20, 10, 30, 40]"
      >

참조URL: https://stackoverflow.com/questions/52819619/understand-rows-per-page-items-at-vuetify-data-iterators-data-tables-can-i