Tree 트리

트리 형태의 표시와 선택입니다. 체크박스(기본적으로 부모-자식 연동 + 중간 상태, checkStrictly 로 연동 해제), 여러 선택, 지연 로딩(펼치지 않은 노드를 펼칠 때 load 호출)을 지원합니다. 제어 키 세 가지는 모두 .sync 로 동작합니다.

트리 컨트롤

<template>
  <div class="demo-col" style="max-width: 320px">
    <p class="demo-note">체크박스 + checkStrictly(부모-자식 연동 안 함) + 기본 펼치기/선택/체크 키</p>
    <LhTree
      :data="data"
      show-checkbox
      check-strictly
      :default-expanded-keys="['song']"
      :default-selected-keys="['xishan']"
      :default-checked-keys="['libai']"
      :expand-on-click-node="false"
      @select="onSelect"
      @check="onCheck"
    />
    <p class="demo-note">클릭 선택: {{ selected }}; 체크 키: {{ checked.join(', ') || '(없음)' }}</p>
    <p class="demo-note">multiple 여러 선택 + disabled 로 전체 비활성화</p>
    <LhTree :data="data" multiple disabled :default-expanded-keys="['tang']" @select="onSelectMulti" />
    <p class="demo-note">여러 선택 결과: {{ multi.join(', ') || '(없음)' }}</p>
    <p class="demo-note">제어 키: expandedKeys / selectedKeys / checkedKeys</p>
    <LhTree
      :data="data"
      show-checkbox
      :expanded-keys="['song']"
      :selected-keys="['guo']"
      :checked-keys="['xishan']"
      @select="onSelect"
    />
    <p class="demo-note">lazy 지연 로딩 (펼치기 클릭 시 load 로 자식 노드를 가져옴)</p>
    <LhTree :data="lazyData" lazy :load="onLoad" :default-expanded-keys="['root']" />
  </div>
</template>

<script>
export default {
  data: () => ({
    selected: '(없음)',
    checked: [],
    multi: [],
    data: [
      {
        key: 'tang',
        label: '당대',
        children: [
          { key: 'wangwei', label: '왕유' },
          { key: 'libai', label: '이백' },
        ],
      },
      {
        key: 'song',
        label: '송대',
        children: [
          {
            key: 'fan',
            label: '범관',
            children: [{ key: 'xishan', label: '계산행려도' }],
          },
          { key: 'guo', label: '곽희' },
        ],
      },
    ],
    lazyData: [{ key: 'root', label: '화과 (클릭하여 지연 로딩)' }],
  }),
  methods: {
    onSelect(key) {
      this.selected = String(key)
    },
    onCheck(keys) {
      this.checked = Array.isArray(keys) ? keys : []
    },
    onSelectMulti(keys) {
      this.multi = Array.isArray(keys) ? keys : [String(keys)]
    },
    onLoad(node, resolve) {
      setTimeout(() => {
        var _a, _b
        resolve([
          { key: `${String((_a = node.key) !== null && _a !== void 0 ? _a : '')}-a`, label: '산수' },
          { key: `${String((_b = node.key) !== null && _b !== void 0 ? _b : '')}-b`, label: '화조' },
        ])
      }, 400)
    },
  },
}
</script>

Props

프로퍼티	설명	타입	기본값
data	트리 데이터	LhTreeNode[]	[]
showCheckbox	체크박스 표시	boolean	false
multiple	여러 선택 (노드 클릭으로 선택을 전환, 교체가 아님)	boolean	false
expandOnClickNode	리프가 아닌 노드를 클릭하면 펼치기 / 접기	boolean	false
defaultExpandedKeys / expandedKeys	기본 펼치기 / 제어 펼치기 키	string[]	—
defaultSelectedKeys / selectedKeys	기본 선택 / 제어 선택 키	string[]	—
defaultCheckedKeys / checkedKeys	기본 체크 / 제어 체크 키	string[]	—
checkStrictly	부모-자식 체크 연동 안 함 (연동과 중간 상태 없음)	boolean	false
lazy	지연 로딩: 펼치지 않은 리프가 아닌 노드를 펼칠 때 load 호출	boolean	false
load	지연 로딩 콜백, resolve(children) 로 제출하고 펼치기, reject() 로 취소	(node, resolve, reject) => void	—
disabled	전체 비활성화	boolean	false
sx	sx 레이아웃 단축 프로퍼티	—	—

Events

update:expandedKeys, update:selectedKeys, update:checkedKeys(모두 .sync), expand (key, isExpanded), select (key, node), check (keys, node), nodeLoad (node, children)

Slots

슬롯	설명
node	노드 라벨, 범위 매개변수 { node, level, expanded, selected }
empty	데이터가 없을 때 내용 (기본값 「데이터 없음」)

접근성

노드는 role="treeitem" + aria-expanded(펼칠 수 있는 노드) + aria-selected / aria-checked 입니다. 컨테이너는 role="tree" 이고, 방향키로 위/아래 이동, 좌/우 펼치기 접기, 스페이스 체크, 엔터 선택을 지원합니다.