데이터 반복자 (Data iterator)
v-data-iterator 컴포넌트는 데이터를 보여주는데 사용합니다. 주요 기능은 v-data-table과 공유합니다.
정렬(sorting), 검색(searching), 페이지네이션(pagination), 선택(selection) 등이 가능합니다.
사용법
The v-data-iterator allows you to customize exactly how to display your data. In this example we are using a grid list with cards. We can use the content-tag prop (along with content-class and content-props) to specify what the wrapper element around the items should look like.
API
아이템을 둘러싼 요소에 커스텀 클래스를 적용
아이템을 둘러싼 요소에 커스텀 prop을 적용
아이템을 둘러싼 요소의 태그를 지정
커스텀 검색 필터
커스컴 정렬 필터
다크 테마를 적용
초기 랜더링에서 기본 정렬을 비활성화
테이블이 확장 가능한 행(row)를 가지도록 지정
아이템을 필터링하는데 사용되는 함수
테이블 액션을 감춤
유일한 키로 지정된 아이템 객체의 필드
테이블 행(row) 배열
라이트 테마를 적용
sorted ascending / sorted descending / unsorted 상태를 바꾸는(toggle) 대신 적어도 한 열(column)이 항상 정열되도록 함.
컴포넌트 뒤에 아이콘을 덧붙임. v-icon과 같은 문법을 사용
데이터가 없을때 보여지는 문자열
필터링 결과가 없을때 보여주는 문자열
데이터 테이블 외부에서 페이지네이션과 정렬을 제어하는데 사용됨. 기본 정렬 열(column)을 지정하는데도 사용됨
{
descending: boolean",
page: number",
rowsPerPage: number // -1 for All",
sortBy: string",
totalItems: number"
}컴포넌트 앞에 아이콘을 추가. v-icon과 같은 문법을 사용
row-per-page 드롭다운에 사용되는 기본값
페이지 텍스트의 기본 행
필터링 결과를 위한 검색 모델
모든 체크박스를 선택할 수 있는 헤더-행을 추가. 버튼의 색깔을 나타내는 문자열이나 불린(boolean) 이 가능. 불린의 경우 기본 색이 쓰임.
수동으로 행(row) 아이템의 총 개수를 설정. 내장 정렬과 페이지네이션은 비활성화 됨. 서버사이드 정렬과 페이지네이션을 위해 pagination prop과 함께 사용가능
선택된 행