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" で、方向キーによる上下移動、左右での展開 / 折りたたみ、スペースでのチェック、Enter での選択をサポートします。