Skip to content

Select

옵션 목록에서 값을 선택할 수 있는 드롭다운 컴포넌트입니다. null 값을 가지는 옵션도 표시할 수 있으며, placeholder 처리와 v-model 바인딩을 지원합니다.

이 컴포넌트는 <el-select> 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

props

이름타입기본값설명
model-valuestring | number | nullnull현재 선택된 값 (v-model 바인딩)
optionsArray<{ label: string, value: any, disabled?: boolean }>[]드롭다운에 표시할 옵션 목록. 각 항목은 labelvalue를 포함해야 함

기본

기본

전체
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>