데이터 반복자 (Data iterator)

v-data-iterator 컴포넌트는 데이터를 보여주는데 사용합니다. 주요 기능은 v-data-table과 공유합니다. 정렬(sorting), 검색(searching), 페이지네이션(pagination), 선택(selection) 등이 가능합니다.

사용법

v-data-iterator로 데이터가 어떻게 보일지 정확하게 커스터마이즈 할 수 있습니다. 이 예제에서는 카드(Cards)와 그리드 리스트(Grid lists)를 사용합니다. content-tag prop을 (content-class, content-props와 함께) 사용하여 아이템들을 둘러싼 요소가 어떻게 보여야할지 지정할 수 있습니다.


API

v-data-iterator
이름
content-class
디폴트
undefined
타입
string

아이템을 둘러싼 요소에 커스텀 클래스를 적용

이름
content-props
디폴트
undefined
타입
object

아이템을 둘러싼 요소에 커스텀 prop을 적용

이름
content-tag
디폴트
'div'
타입
string

아이템을 둘러싼 요소의 태그를 지정

이름
custom-filter
디폴트
(items: object[], search: string, filter: Filter): object[]
타입
function

커스텀 검색 필터

이름
custom-sort
디폴트
(items: object[], index: number, isDescending: boolean): object[]
타입
function

커스컴 정렬 필터

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
disable-initial-sort
디폴트
false
타입
boolean

초기 랜더링에서 기본 정렬을 비활성화

이름
expand
디폴트
false
타입
boolean

테이블이 확장 가능한 행(row)를 가지도록 지정

이름
filter
디폴트
(val: object, search: string): boolean
타입
function

아이템을 필터링하는데 사용되는 함수

이름
hide-actions
디폴트
false
타입
boolean

테이블 액션을 감춤

이름
item-key
디폴트
'id'
타입
string

유일한 키로 지정된 아이템 객체의 필드

이름
items
디폴트
[]
타입
array

테이블 행(row) 배열

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
loading
디폴트
false
타입
boolean | string

선형 프로그레스바를 표시. 프로그레스바의 색을 나타내는 문자열(마테리얼 이나 테마 색상 - primary, secondary, success, info, warning, error)이나 부울값(boolean) 이 가능. 부울값의 경우 컴포넌트 색상(컴포넌트가 지원할 경우 color prop으로 지정된 값)이나 primary 색상이 사용됨

이름
must-sort
디폴트
false
타입
boolean

sorted ascending / sorted descending / unsorted 상태를 바꾸는(toggle) 대신 적어도 한 열(column)이 항상 정열되도록 함.

이름
next-icon
디폴트
'$vuetify.icons.next'
타입
string

컴포넌트 뒤에 아이콘을 덧붙임. v-icon과 같은 문법을 사용

이름
no-data-text
디폴트
'$vuetify.noDataText'
타입
string

데이터가 없을때 보여지는 문자열

이름
no-results-text
디폴트
'$vuetify.dataIterator.noResultsText'
타입
string

필터링 결과가 없을때 보여주는 문자열

이름
pagination.sync
디폴트
타입
object

데이터 테이블 외부에서 페이지네이션과 정렬을 제어하는데 사용됨. 기본 정렬 열(column)을 지정하는데도 사용됨

{
  descending: boolean
  page: number
  rowsPerPage: number // -1 for All
  sortBy: string
  totalItems: number
}
이름
prev-icon
디폴트
'$vuetify.icons.prev'
타입
string

컴포넌트 앞에 아이콘을 추가. v-icon과 같은 문법을 사용

이름
rows-per-page-items
디폴트
[ 5, 10, 25, { "text": "$vuetify.dataIterator.rowsPerPageAll", "value": -1 } ]
타입
array

row-per-page 드롭다운에 사용되는 기본값

이름
rows-per-page-text
디폴트
'$vuetify.dataIterator.rowsPerPageText'
타입
string

페이지 텍스트의 기본 행

이름
search
디폴트
undefined
타입
any

필터링 결과를 위한 검색 모델

이름
select-all
디폴트
undefined
타입
boolean | string

모든 체크박스를 선택할 수 있는 헤더-행을 추가. 버튼의 색깔을 나타내는 문자열이나 불린(boolean) 이 가능. 불린의 경우 기본 색이 쓰임.

이름
total-items
디폴트
undefined
타입
number

수동으로 행(row) 아이템의 총 개수를 설정. 내장 정렬과 페이지네이션은 비활성화 됨. 서버사이드 정렬과 페이지네이션을 위해 pagination prop과 함께 사용가능

이름
value
디폴트
[]
타입
array

선택된 행

예제

Slots

The v-data-iterator has both a header and footer slot for adding extra content