TreeSelect 树形选择器

下拉树形结构选择器，支持单选、多选复选框和搜索过滤。

基础用法

请选择地区

单选模式，点击叶子节点或父节点进行选择

vue

<script setup lang="ts">
import { ref } from "vue";
import { ATreeSelect } from "@lite-code/aui-vue";

const value = ref<string | number | undefined>(undefined);

const treeData = [
  {
    key: "1",
    label: "华东区",
    children: [
      {
        key: "1-1",
        label: "上海市",
        children: [
          { key: "1-1-1", label: "浦东新区" },
          { key: "1-1-2", label: "静安区" },
        ],
      },
      {
        key: "1-2",
        label: "江苏省",
        children: [
          { key: "1-2-1", label: "南京市" },
          { key: "1-2-2", label: "苏州市" },
        ],
      },
    ],
  },
  {
    key: "2",
    label: "华北区",
    children: [
      { key: "2-1", label: "北京市" },
      { key: "2-2", label: "天津市" },
    ],
  },
];
</script>

<template>
  <ATreeSelect
    :data="treeData"
    :value="value"
    placeholder="请选择地区"
    style="width: 240px"
    @change="value = $event as string | number"
  />
</template>

多选模式

请选择成员

设置 multiple 后显示复选框，父节点支持全选/半选

vue

<script setup lang="ts">
import { ref } from 'vue'
import { ATreeSelect } from '@lite-code/aui-vue'

const value = ref<(string | number)[]>([])

const treeData = [
  {
    key: '1', label: '技术部',
    children: [
      { key: '1-1', label: '前端组', children: [
        { key: '1-1-1', label: '张三' },
        { key: '1-1-2', label: '李四' },
      ]},
      { key: '1-2', label: '后端组', children: [
        { key: '1-2-1', label: '王五' },
        { key: '1-2-2', label: '赵六' },
      ]},
    ],
  },
  {
    key: '2', label: '产品部',
    children: [
      { key: '2-1', label: '产品经理' },
      { key: '2-2', label: '设计师' },
    ],
  },
]
</script>

<template>
  <ATreeSelect
    :data="treeData"
    :value="value"
    multiple
    clearable
    default-expand-all
    placeholder="请选择成员"
    style="width: 320px;"
    @change="value = $event as (string | number)[]"
  />
</template>

可搜索

输入关键字搜索

设置 searchable 后可在触发框内输入关键字过滤树节点

vue

<script setup lang="ts">
import { ref } from "vue";
import { ATreeSelect } from "@lite-code/aui-vue";

const value = ref<string | number | undefined>(undefined);

const treeData = [
  {
    key: "1",
    label: "华东区",
    children: [
      {
        key: "1-1",
        label: "上海市",
        children: [
          { key: "1-1-1", label: "浦东新区" },
          { key: "1-1-2", label: "静安区" },
        ],
      },
      {
        key: "1-2",
        label: "江苏省",
        children: [
          { key: "1-2-1", label: "南京市" },
          { key: "1-2-2", label: "苏州市" },
        ],
      },
    ],
  },
  {
    key: "2",
    label: "华北区",
    children: [
      { key: "2-1", label: "北京市" },
      { key: "2-2", label: "天津市" },
    ],
  },
];
</script>

<template>
  <ATreeSelect
    :data="treeData"
    :value="value"
    searchable
    clearable
    placeholder="输入关键字搜索"
    style="width: 240px"
    @change="value = $event as string | number"
  />
</template>

API

Props

属性	类型	默认值	说明
data	TreeNodeData[]	—	树形数据（必填）
value	TreeSelectValue	—	选中的值（受控）
onChange	(value) => void	—	选中值变化回调
multiple	boolean	false	是否多选（复选框模式）
placeholder	string	'请选择'	未选择时的占位文字
disabled	boolean	false	是否禁用
size	TreeSelectSize	'md'	尺寸：sm | md | lg
clearable	boolean	false	是否显示清空按钮
searchable	boolean	false	是否可搜索
defaultExpandAll	boolean	false	默认展开所有节点
maxTagCount	number	10	多选时最多显示的 Tag 数量
line	boolean	false	树形是否显示连接线
className	string	—	自定义 class
style	object	—	自定义样式

类型

type TreeSelectSize = "sm" | "md" | "lg";
type TreeSelectValue = string | number | (string | number)[];

TreeNodeData 见 Tree 组件。