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 が設定され、完全なキーボードナビゲーションをサポートします。