TreeSelect 트리 선택기

트리 형태의 선택 컨트롤입니다. LhTree 의 펼치기/체크 로직을 재사용합니다. 단일 선택에서 첫 번째로 부모 노드를 클릭하면 펼치기만 하고(한 번 더 클릭해야 선택), 리프 노드를 클릭하면 바로 선택됩니다. 여러 선택은 체크박스로 동작합니다. 패널은 기본적으로 body 에 마운트됩니다 (Vue2 는 Teleport 가 없습니다).

트리 선택기

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhTreeSelect v-model="single" :data="data" placeholder="단일 선택 (부모 노드 클릭으로 펼치기, 리프 클릭으로 선택)" />
      <LhTreeSelect v-model="single" :data="data" disabled placeholder="비활성화" />
      <LhTreeSelect v-model="multi" :data="data" multiple placeholder="여러 선택 (체크박스)" />
    </div>
    <LhTreeSelect v-model="embedded" :data="data" :teleported="false" placeholder="teleported=false 패널 내장" />
    <p class="demo-note">
      단일: {{ single || '(선택 안 됨)' }}; 여러: {{ multi.join(', ') || '(선택 안 됨)' }}; 내장: {{
        embedded || '(선택 안 됨)'
      }}
    </p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: 'xishan',
    multi: [],
    embedded: '',
    data: [
      {
        key: 'song',
        label: '송대',
        children: [
          { key: 'fan', label: '범관' },
          { key: 'xishan', label: '계산행려도' },
        ],
      },
      { key: 'yuan', label: '원대', children: [{ key: 'huang', label: '황공망' }] },
    ],
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
data	트리 데이터	LhTreeNode[]	[]
v-model	현재 값; 단일 선택이면 키 문자열, 여러 선택이면 체크된 키 배열	string \| string[]	—
multiple	여러 선택 (체크박스 표시, 값은 체크된 키 배열)	boolean	false
disabled	비활성화	boolean	false
placeholder	플레이스홀더 텍스트	string	언어 패키지
teleported	패널을 body 에 마운트할지 여부	boolean	true
sx	sx 레이아웃 단축 프로퍼티	—	—

Events

input(v-model), change (value)

접근성

트리거는 role="combobox" + aria-expanded 이고, 패널 안에서 LhTree 의 role="tree" / role="treeitem" 의미를 상속합니다. 여러 선택 모드에서는 체크박스에 aria-checked 가 설정되고, 완전한 키보드 내비게이션을 지원합니다.