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

<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>

import { useState } from 'react';
import { CfTreeSelect } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState('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 },
      ],
    },
  ];
  return (
    <>
      <div className="demo-stack">
          <CfTreeSelect value={value} onChange={setValue} options={options} searchable clearable />
          <p className="demo-hint">已选：<code>{value ?? 'undefined'}</code></p>
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfTreeSelect } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState('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 },
      ],
    },
  ];
  return (
    <>
      <div className="demo-stack">
          <CfTreeSelect value={value} onChange={setValue} options={options} searchable clearable />
          <p className="demo-hint">已选：<code>{value ?? 'undefined'}</code></p>
        </div>
    </>
  );
}

API

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).