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 のキーボードナビゲーションをサポートします。