Select
옵션 목록에서 값을 선택할 수 있는 드롭다운 컴포넌트입니다. null 값을 가지는 옵션도 표시할 수 있으며, placeholder 처리와 v-model 바인딩을 지원합니다.
이 컴포넌트는
<el-select>
컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.
props
이름 | 타입 | 기본값 | 설명 |
---|---|---|---|
model-value | string | number | null | null | 현재 선택된 값 (v-model 바인딩) |
options | Array<{ label: string, value: any, disabled?: boolean }> | [] | 드롭다운에 표시할 옵션 목록. 각 항목은 label 과 value 를 포함해야 함 |
기본
기본
전체
html
<nv-select v-model="selected" :options="selectOptions" />
<script setup>
const selected = ref(null)
const selectOptions = [
{ label: '전체', value: null },
{ label: '사용자', value: 'user' },
{ label: '관리자', value: 'admin' },
{ label: '게스트', value: 'guest', disabled: true }
]
</script>