TreeSelect 树形选择

AuTreeSelect 在紧凑输入框中选择单个层级节点。

基础用法

知识库位置

仅选择叶节点

当前节点：date-picker；叶节点：未选择

<template>
  <div class="tree-select-demo">
    <label>
      <span>知识库位置</span>
      <AuTreeSelect
        v-model="selectedKey"
        :data="treeData"
        filterable
        default-expand-all
      />
    </label>
    <label>
      <span>仅选择叶节点</span>
      <AuTreeSelect v-model="leafKey" :data="treeData" leaf-only :default-expanded-keys="['guides']" />
    </label>
    <p>当前节点：{{ selectedKey || '未选择' }}；叶节点：{{ leafKey || '未选择' }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuTreeSelect } from 'aurora-plus';
const selectedKey = ref('date-picker');
const leafKey = ref(null);
const treeData = [
  {
    id: 'guides',
    label: '使用指南',
    children: [
      { id: 'start', label: '快速开始' },
      { id: 'theme', label: '主题配置' },
    ],
  },
  {
    id: 'components',
    label: '表单组件',
    children: [
      { id: 'date-picker', label: '日期选择器' },
      { id: 'tree-select', label: '树形选择' },
      { id: 'archived', label: '已归档组件', disabled: true },
    ],
  },
];
</script>
<style scoped>
.tree-select-demo {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.tree-select-demo label {
  display: grid;
  gap: 6px;
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
.tree-select-demo p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
</style>

Attributes

属性	说明	类型	默认值
modelValue	选中节点 key	string / number / null	null
data	嵌套节点数据	array	[]
itemKey / labelKey / childrenKey / disabledKey	字段映射	string	id / label / children / disabled
expandedKeys	受控展开 key	array / null	null
defaultExpandedKeys	非受控初始展开 key	array	[]
defaultExpandAll	初始展开全部父节点	boolean	false
leafOnly	仅允许选择叶节点	boolean	false
filterable	是否允许输入搜索	boolean	false
filterPlaceholder	搜索占位文字	string	搜索节点
placeholder	未选择时占位文字	string	选择节点
emptyText / noMatchText	空数据 / 无匹配文字	string	暂无数据 / 无匹配节点
clearable	是否允许清空；有值时清除按钮原位替换展开图标	boolean	true
disabled / invalid	禁用 / 错误状态	boolean	false
size	尺寸	small / default / large	default
itemHeight / overscan	虚拟列表行高 / 预渲染数	number	28 / 8
placement	浮层方位	string	bottom-start
teleported / appendTo / zIndex	浮层挂载与层级	boolean / string | Element / number	true / body / 1200

Events

事件名	说明	参数
update:modelValue	选中值变化	(key)
change	选择或清空	(key, node, event?)
select	选择节点	(node)
clear	清空	(event)
update:expandedKeys	展开 key 变化	(keys)
expand-change	请求切换展开状态	(keys, node)
focus / blur	输入框焦点变化	(event)
visible-change	浮层显隐变化	(visible)

Exposes

名称	说明
focus(options?) / blur()	输入框聚焦 / 失焦
open() / close(reason?)	打开 / 关闭浮层
inputRef / treeRef / popoverRef	输入框、树、浮层引用