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，支援完整鍵盤導覽。