开发预览更新于 2026-05-10

TreeSelect 树形选择

把树形数据放进下拉选择器，支持搜索、多选、清空与禁用节点。

基础用法

CfTreeSelect 面向部门、权限、资源目录、地区等层级数据。选项通过 children 描述树结构，搜索会匹配节点自身与路径。

背景

已选：edge-workers

<script setup lang="ts">
import { ref } from 'vue';
import { CfTreeSelect, type TreeSelectNode } from '@chufix-design/vue';

const value = ref('edge-workers');
const options: TreeSelectNode[] = [
  {
    value: 'platform',
    label: '平台能力',
    children: [
      { value: 'edge-workers', label: 'Workers' },
      { value: 'storage-d1', label: 'D1 数据库' },
      { value: 'storage-r2', label: 'R2 存储' },
    ],
  },
  {
    value: 'product',
    label: '产品体验',
    children: [
      { value: 'docs', label: '文档站' },
      { value: 'dashboard', label: '控制台' },
      { value: 'billing', label: '计费中心', disabled: true },
    ],
  },
];
</script>

<template>
  <div class="demo-stack">
    <CfTreeSelect v-model="value" :options="options" searchable clearable />
    <p class="demo-hint">已选：<code>{{ value ?? 'undefined' }}</code></p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfTreeSelect } from '@chufix-design/vue';

const value = ref('edge-workers');
const options= [
  {
    value: 'platform',
    label: '平台能力',
    children: [
      { value: 'edge-workers', label: 'Workers' },
      { value: 'storage-d1', label: 'D1 数据库' },
      { value: 'storage-r2', label: 'R2 存储' },
    ],
  },
  {
    value: 'product',
    label: '产品体验',
    children: [
      { value: 'docs', label: '文档站' },
      { value: 'dashboard', label: '控制台' },
      { value: 'billing', label: '计费中心', disabled: true },
    ],
  },
];
</script>

<template>
  <div class="demo-stack">
    <CfTreeSelect v-model="value" :options="options" searchable clearable />
    <p class="demo-hint">已选：<code>{{ value ?? 'undefined' }}</code></p>
  </div>
</template>

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

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

API

属性	类型	默认值	说明
`options`	`TreeSelectNode[]`	`—`	树节点列表
`value` / `modelValue`	`string / string[]`	`—`	当前值
`placeholder`	`string`	`请选择`	空值占位
`multiple`	`boolean`	`false`	多选
`searchable`	`boolean`	`false`	显示搜索输入
`clearable`	`boolean`	`false`	显示清空按钮
`disabled`	`boolean`	`false`	禁用
`size`	`sm / md / lg`	`md`	尺寸

事件：Vue update:modelValue / change(value, node)，React onChange(value, node)。

TreeSelectNode

字段	类型	说明
`value`	`string`	唯一值
`label`	`string`	展示文本
`disabled`	`boolean`	禁用节点
`children`	`TreeSelectNode[]`	子节点