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 鍵盤導覽。