Cascader 계단식 선택기

계단식 선택기입니다. 단계별로 하위 패널을 펼치고, checkStrictly로 부모-자식 연결을 해제하면 임의의 계층을 선택할 수 있으며, emitPath가 전체 경로를 반환할지 마지막 값만 반환할지를 제어합니다. 패널은 body에 마운트됩니다 (Vue2에는 Teleport가 없음).

여러 선택(multiple) 시 값은 선택한 경로의 배열이며, 마찬가지로 emitPath의 제약을 받습니다: emitPath=true이면 각 항목이 전체 경로, emitPath=false이면 각 항목이 마지막 값만 됩니다. 제어식 비우기 (외부에서 v-model을 비움) 는 선택된 태그를 동기화하여 비웁니다.

계단식 선택기

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhCascader v-model="path" :options="options" placeholder="화과를 선택하세요" clearable separator=">" />
      <LhCascader v-model="path" :options="options" size="small" disabled />
      <LhCascader v-model="path" :options="options" size="large" readonly />
    </div>
    <p class="demo-note">전체 경로 (separator=">"): {{ path.length ? path.join(' &gt; ') : '(선택 안 함)' }}</p>
    <LhCascader
      v-model="leaf"
      :options="options"
      :emit-path="false"
      :show-all-levels="false"
      check-strictly
      placeholder="부모-자식 연결 없이 임의 계층 선택 가능"
    />
    <p class="demo-note">마지막 값만: {{ leaf.length ? leaf.join(', ') : '(선택 안 함)' }}</p>
    <LhCascader
      v-model="multi"
      :options="options"
      multiple
      collapse-tags
      filterable
      placeholder="여러 선택 + 태그 접기 + 검색"
    />
    <p class="demo-note">여러 선택값: {{ multi.length ? multi.map((m) => m.join('/')).join(', ') : '(선택 안 함)' }}</p>
    <LhCascader
      v-model="custom"
      :options="customOptions"
      :item-config="{ value: 'id', label: 'name', children: 'sub' }"
      placeholder="사용자 정의 필드 매핑 (id/name/sub)"
      clearable
    />
    <p class="demo-note">사용자 정의 키: {{ custom.length ? custom.join(' / ') : '(선택 안 함)' }}</p>
    <p class="demo-note">cascading (기본값) 은 마우스 오버 시 하위를 펼칩니다. 계단식 데이터는 위 각 예시를 참조하세요.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    path: ['shan', 'pomo', 'dapo'],
    leaf: [],
    multi: [],
    custom: [],
    options: [
      {
        value: 'shan',
        label: '산수',
        children: [
          {
            value: 'pomo',
            label: '발묵 산수',
            children: [
              { value: 'xiaopo', label: '소발묵' },
              { value: 'dapo', label: '대발묵' },
            ],
          },
          { value: 'qianjiang', label: '천강 산수' },
        ],
      },
      {
        value: 'hua',
        label: '화조',
        children: [
          { value: 'gongbi', label: '공필 화조' },
          { value: 'xieyi', label: '사의 화조' },
        ],
      },
    ],
    customOptions: [
      {
        id: 'hua',
        name: '화조',
        sub: [
          { id: 'gongbi', name: '공필 화조' },
          { id: 'xieyi', name: '사의 화조' },
        ],
      },
      {
        id: 'shu',
        name: '서예',
        sub: [{ id: 'kaishu', name: '해서' }],
      },
    ],
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
v-model	선택 경로. emitPath=false 시 마지막 값 (여러 선택 시 이들의 배열)	(string \| number)[]	—
options	선택 가능 항목 데이터	LhCascaderNode[]	[]
size	크기	'small' \| 'medium' \| 'large'	'medium'
disabled / readonly / clearable	비활성화 / 읽기 전용 / 지우기 가능	boolean	false
placeholder	자리표시 텍스트	string	언어 팩
showAllLevels	전체 경로 표시 (기본) 또는 마지막만	boolean	true
checkStrictly	부모-자식 연결 해제, 임의 계층 선택 가능	boolean	false
emitPath	전체 경로 반환 (기본) 또는 마지막 값만	boolean	true
multiple	여러 선택	boolean	false
cascading	마우스 오버 시 하위 펼침	boolean	true
separator	경로 구분 기호	string	' / '
collapseTags	여러 선택 시 태그를 개수로 접기	boolean	false
filterable	검색 가능	boolean	false
itemConfig	사용자 정의 필드 매핑 (value/label/children/disabled)	LhCascaderItemConfig	—
teleportTarget	팝업 레이어 마운트 대상	string \| HTMLElement	'body'
sx	sx 레이아웃 단축 프로퍼티	—	—

Events

input(v-model), change (value, nodes)

Slots

슬롯	설명
no-match	filterable 검색 결과가 없을 때의 콘텐츠 (기본 "일치하는 데이터 없음")

접근성

트리거는 role="combobox" + aria-expanded, 각 패널은 role="listbox", 옵션은 role="option"이며, 펼쳐진 계층이 바뀌면 aria-activedescendant를 동기화하고, 방향키 / Enter / ESC 키보드 탐색을 지원합니다.