트랜스퍼 (Transfer)
트랜스퍼 (Transfer)
출처: 문서
본문
두 개의 열 레이아웃에서 데이터를 이동하는 컴포넌트예요.
기본 사용법 (Basic Usage)
두 개의 열 레이아웃에서 데이터를 이동해요.
필터 (Filter)
검색과 필터링을 활성화해요.
커스텀 렌더러 (Custom Renderer)
항목이 렌더링되는 방식을 커스터마이즈해요.
커스텀 필터 (Custom Filter)
필터링이 적용되는 방식을 커스터마이즈해요.
Transfer API
Transfer 속성 (Attributes)
| Name | Description | Type | Default |
|---|---|---|---|
| v-model | 바인딩 값 | array | — |
| data | Transfer 데이터 소스 | array | [] |
| filterable | Transfer 필터 가능 여부 | boolean | false |
| filter-placeholder | 필터 입력의 플레이스홀더 | string | — |
| filter-method | 커스텀 필터 함수 | Function | — |
| target-order | 대상 목록에 있는 요소의 순서 전략 | string | original |
| titles | 커스텀 목록 제목 | array / (item, index) => VNode | [] |
| button-texts | 커스텀 버튼 텍스트 | array / (item, index) => VNode | [] |
| render-content | 커스텀 콘텐츠 렌더러 | Function | — |
| format | 모든 데이터가 전송되었을 때의 상태 텍스트 | object | — |
| props | 데이터 소스 필드 별칭 | object | — |
| validate-event | 폼 검증 트리거 여부 | boolean | true |
Transfer 이벤트 (Events)
| Name | Description | Type |
|---|---|---|
| change | 데이터가 변경될 때 트리거돼요 | Function |
| left-check-change | 왼쪽 목록이 체크될 때 트리거돼요 | Function |
| right-check-change | 오른쪽 목록이 체크될 때 트리거돼요 | Function |
Transfer 슬롯 (Slots)
| Name | Description |
|---|---|
| left-footer | 왼쪽 목록의 푸터 |
| right-footer | 오른쪽 목록의 푸터 |