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
}