TreeSelect 樹選擇

下拉觸發器 + Tree 面板組合。單選傳回 string，多選（勾選框）傳回 string[]。

基礎用法

單選

<script setup>
import { ref } from 'vue'
const treeValue = ref(undefined)
const treeData = [
  { key: 'a', label: '前端', children: [
    { key: 'a-1', label: 'Vue' },
    { key: 'a-2', label: 'React' },
  ] },
  { key: 'b', label: '后端' },
]
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

<script>
export default {
  data() {
    return {
      treeValue: undefined,
      treeData: [
        { key: 'a', label: '前端', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: '后端' },
      ],
    }
  },
}
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

多選

多選

<script setup>
import { ref } from 'vue'
const treeMulti = ref([])
</script>

<template>
  <!-- 多選 -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="请选择技术栈" />
</template>

<script>
export default {
  data() {
    return {
      treeMulti: [],
      treeData: [
        { key: 'a', label: '前端', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: '后端' },
      ],
    }
  },
}
</script>

<template>
  <!-- 多選 -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="请选择技术栈" />
</template>

停用與掛載

disabled 停用選擇器；teleported 設為 false 時下拉麵板就地掛載（不傳送到 body）。

停用 / 就地面板

<script setup>
import { ref } from 'vue'
const treeDisabled = ref([])
const treeLocal = ref([])
</script>

<template>
  <!-- 停用 -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- 就地面板 -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

<script>
export default {
  data() {
    return {
      treeDisabled: [],
      treeLocal: [],
      treeData: [
        { key: 'a', label: '前端', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: '后端' },
      ],
    }
  },
}
</script>

<template>
  <!-- 停用 -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- 就地面板 -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

API

LhTreeSelect Props

屬性名	說明	類型	預設值
data	樹狀資料	[LhTreeNode](#type-LhTreeNode)[]	—
modelValue	當前值（單選 string / 多選 string[]，受控 v-model）	string | string[]	—
multiple	多選（顯示勾選框，值為勾選鍵陣列）	boolean	false
disabled	停用	boolean	false
placeholder	佔位文字	string	—
teleported	面板是否掛到 body（預設 true）	boolean	true
sx	sx 快速版面配置屬性	LhSxProps	—

Events

事件名	說明	回呼參數
update:modelValue	選中值變化時觸發，配合 v-model 使用（單選為 string，多選為 string[]）	(value: string | string[] | undefined)
change	選中變化後觸發	(value: string | string[] | undefined)

無障礙

• 觸發器為真實 <button>，aria-haspopup="tree" + aria-expanded 標註展開態；面板 role="listbox"（多選加 aria-multiselectable）
• 面板內部完全複用 Tree 的 APG tree pattern 鍵盤導覽
• 點選元件外部或按 Escape 關閉，關閉後焦點歸還觸發器

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/tree-select/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhTreeSelectProps

export interface LhTreeSelectProps {
  /** 樹狀資料 */
  data: LhTreeNode[]
  /** 當前值（單選 string / 多選 string[]，受控 v-model） */
  modelValue?: string | string[]
  /** 多選（顯示勾選框，值為勾選鍵陣列） */
  multiple?: boolean
  /** 停用 */
  disabled?: boolean
  /** 佔位文字 */
  placeholder?: string
  /** 面板是否掛到 body（預設 true） */
  teleported?: boolean
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhTreeNode _{（來自 @lh-ui/share/core/tree）}

/** 樹狀節點資料 */
export interface LhTreeNode {
  /** 唯一鍵 */
  key: string
  /** 顯示文本 */
  label: string
  /** 子節點 */
  children?: LhTreeNode[]
  /** 停用 */
  disabled?: boolean
  /** 是否葉子（不傳按 children 推斷） */
  isLeaf?: boolean
}