Preview Updated 2026-05-10

TreeSelect

A dropdown selector for tree data with search, multiple selection, clear, and disabled nodes.

Basic Usage

CfTreeSelect is designed for departments, permissions, resource directories, regions, and other hierarchical data.

已选：edge-workers

src/App.vue vue

<CfTreeSelect v-model="value" :options="options" searchable clearable />

src/App.tsx tsx

<CfTreeSelect value={value} options={options} searchable clearable onChange={setValue} />

Prop	Type	Default	Description
`options`	`TreeSelectNode[]`	`—`	Tree nodes
`value` / `modelValue`	`string / string[]`	`—`	Current value
`placeholder`	`string`	`请选择`	Empty placeholder
`multiple`	`boolean`	`false`	Multiple selection
`searchable`	`boolean`	`false`	Show search input
`clearable`	`boolean`	`false`	Show clear button
`disabled`	`boolean`	`false`	Disable the control
`size`	`sm / md / lg`	`md`	Size

Events: Vue update:modelValue / change(value, node), React onChange(value, node).