树选择器 TreeSelect - Svelte

使用场景

当需要选择的选项为树形结构时，可以使用树选择器，例如部门层级、学科体系、分类目录等。

代码演示

如何引入

<script lang="ts">
    import { TreeSelect } from '@fibrae/semi-ui-svelte';
</script>

基本用法

最简单的用法，默认为单选模式，每一级菜单项均可选择。

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<TreeSelect {dropdownStyle} placeholder="请选择" {style} {treeData} />

多选

设置 multiple，可以进行多选。多选情况下所有子项都被选择时，自动勾选显示其父项。

多选时 bind:value 与 value 都是数组。通过 leafOnly 属性，可以设置只展示叶子节点，同时 bind:value 的值与 onChange 的入参也只会有叶子节点的值。

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: 'Beijing',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: 'Shanghai',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                        {
                            label: 'Chengdu',
                            value: 'Chengdu',
                            key: '0-0-2',
                        },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [
                        {
                            label: 'Osaka',
                            value: 'Osaka',
                            key: '0-1-0',
                        },
                    ],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                {
                    label: 'United States',
                    value: 'United States',
                    key: '1-0',
                },
                {
                    label: 'Canada',
                    value: 'Canada',
                    key: '1-1',
                },
            ],
        },
    ];
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<div>
    <TreeSelect {dropdownStyle} multiple placeholder="请选择" style="width: 300px" {treeData} />
    <br />
    <br />
    <TreeSelect {dropdownStyle} leafOnly multiple placeholder="只渲染叶子节点" style="width: 300px" {treeData} />
    <br />
    <br />
</div>

限制标签展示数量

在多选的场景中，利用 maxTagCount 可以限制展示的标签数量，超出部分将以 +N 的方式展示。
使用 showRestTagsPopover (>= v2.22.0) 可以设置在超出 maxTagCount 后，hover +N 是否显示 Popover，默认为 false。并且，还可以在 restTagsPopoverProps 属性中配置 Popover。

maxTagCount=2:

maxTagCount=2, showRestTagsPopover:

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: 'Beijing',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: 'Shanghai',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                        {
                            label: 'Chengdu',
                            value: 'Chengdu',
                            key: '0-0-2',
                        },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [
                        {
                            label: 'Osaka',
                            value: 'Osaka',
                            key: '0-1-0',
                        },
                    ],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                {
                    label: 'United States',
                    value: 'United States',
                    key: '1-0',
                },
                {
                    label: 'Canada',
                    value: 'Canada',
                    key: '1-1',
                },
            ],
        },
    ];

    const textStyle = 'margin: 20px 0 10px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<div>
    <h4 style={textStyle}>maxTagCount=2:</h4>
    <TreeSelect {dropdownStyle} maxTagCount={2} multiple placeholder="当选中标签超过两个将折叠" style="width: 300px" {treeData} value={['Beijing', 'Chengdu', 'Canada']} />
    <h4 style={textStyle}>maxTagCount=2, showRestTagsPopover:</h4>
    <TreeSelect {dropdownStyle} maxTagCount={2} multiple placeholder="hover +N 查看" restTagsPopoverProps={{ position: 'top' }} showRestTagsPopover style="width: 300px" {treeData} value={['Beijing', 'Chengdu', 'Canada']} />
</div>

可搜索的

通过设置 filterTreeNode 属性可支持搜索功能。默认对 label 值进行搜索，可通过 treeNodeFilterProp 更改。

如果只希望展示过滤后的结果，可以设置 showFilteredOnly 。

如果想要获取搜索结果的具体信息，可使用 onSearch 回调函数，函数具体参数见 API 列表。

showFilteredOnly

代码

<script lang="ts">
    import { Switch, TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    let showFilteredOnly = $state(false);

    const treeData: TreeNodeData[] = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        { label: 'Beijing', value: 'Beijing', key: '0-0-0' },
                        { label: 'Shanghai', value: 'Shanghai', key: '0-0-1' },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [{ label: 'Osaka', value: 'Osaka', key: '0-1-0' }],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                { label: 'United States', value: 'United States', key: '1-0' },
                { label: 'Canada', value: 'Canada', key: '1-1' },
            ],
        },
    ];

    const dropdownStyle = 'max-height: 400px; overflow: auto';

    const onSearch = (input: string, filteredExpandedKeys: string[], filteredNodes: TreeNodeData[]) => {
        console.log('onSearch', input, filteredExpandedKeys, filteredNodes);
    };
</script>

<span id="treeselect-searchable-filtered-only">showFilteredOnly</span>
<Switch aria-labelledby="treeselect-searchable-filtered-only" bind:checked={showFilteredOnly} size="small" />
<br />
<br />
<TreeSelect {dropdownStyle} filterTreeNode {onSearch} placeholder="单选可搜索的" {showFilteredOnly} style="width: 300px" {treeData} />
<br />
<br />
<TreeSelect {dropdownStyle} filterTreeNode maxTagCount={2} multiple {onSearch} placeholder="多选可搜索的" searchPlaceholder="请输入关键字开始搜索" {showFilteredOnly} style="width: 300px" {treeData} />
<br />
<br />
<TreeSelect {dropdownStyle} filterTreeNode maxTagCount={2} multiple {onSearch} placeholder="搜索框autofocus" searchAutoFocus searchPlaceholder="autofocus" {showFilteredOnly} style="width: 300px" {treeData} />

远程搜索

通过设置 remote 属性可启用远程搜索。开启后，输入时不会执行本地过滤，而是仅触发 onSearch 回调，用户可自行处理远程数据获取并更新 treeData（传入新数组才会更新）。

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData, type TreeSelectValue } from '@fibrae/semi-ui-svelte';

    let value = $state<TreeSelectValue | undefined>();
    let treeData = $state.raw<TreeNodeData[]>([]);

    const onSearch = (input: string) => {
        if (!input) {
            treeData = [];
            return;
        }

        setTimeout(() => {
            treeData = [
                { label: `${input} - 结果1`, value: `${input}-1`, key: `${input}-1` },
                { label: `${input} - 结果2`, value: `${input}-2`, key: `${input}-2` },
                { label: `${input} - 结果3`, value: `${input}-3`, key: `${input}-3` },
            ];
        }, 500);
    };
</script>

<TreeSelect bind:value filterTreeNode {onSearch} placeholder="请输入关键字进行远程搜索" remote style="width: 300px" {treeData} />

搜索框位置

可以使用 searchPosition 来设置搜索框的位置，可选: dropdown(默认)、trigger。

当输入框位于 trigger 时:

搜索框占位符由 placeholder 控制；
showClear=true 时，点击输入框的清空按钮，将同时清空 inputValue 和 value。

单选

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: 'Beijing',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: 'Shanghai',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [
                        {
                            label: 'Osaka',
                            value: 'Osaka',
                            key: '0-1-0',
                        },
                    ],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                {
                    label: 'United States',
                    value: 'United States',
                    key: '1-0',
                },
                {
                    label: 'Canada',
                    value: 'Canada',
                    key: '1-1',
                },
            ],
        },
    ];
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<TreeSelect {dropdownStyle} filterTreeNode placeholder="单选" searchPosition="trigger" style="width: 300px" {treeData} />
<br />
<br />
<TreeSelect {dropdownStyle} filterTreeNode maxTagCount={2} multiple placeholder="多选" searchPosition="trigger" style="width: 300px" {treeData} />

Trigger 内多行换行（triggerTagWrap）

当你在 多选 + 搜索框位于 trigger 的场景下，选择了较多项或输入较长文本时，默认 trigger 可能会更倾向于保持单行展示。

开启 triggerTagWrap 后，可以让 trigger 内的已选标签支持自动换行（多行展示）。

China

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        { label: 'Beijing', value: 'Beijing', key: '0-0-0' },
                        { label: 'Shanghai', value: 'Shanghai', key: '0-0-1' },
                        { label: 'Shenzhen', value: 'Shenzhen', key: '0-0-2' },
                        { label: 'Guangzhou', value: 'Guangzhou', key: '0-0-3' },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [{ label: 'Osaka', value: 'Osaka', key: '0-1-0' }],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                { label: 'United States', value: 'United States', key: '1-0' },
                { label: 'Canada', value: 'Canada', key: '1-1' },
            ],
        },
    ];

    const initialValue = ['Beijing', 'Shanghai', 'Shenzhen', 'Guangzhou'];
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<TreeSelect {dropdownStyle} filterTreeNode multiple placeholder="请选择多个选项或输入长文本" searchPosition="trigger" style="width: 260px" {treeData} triggerTagWrap value={initialValue} />

尺寸大小

可以通过 size 设置尺寸大小，可选: 'small'、'default'、'large'

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        { label: '北京', value: 'Beijing', key: '0-0-0' },
                        { label: '上海', value: 'Shanghai', key: '0-0-1' },
                    ],
                },
            ],
        },
        { label: '北美洲', value: 'North America', key: '1' },
    ];

    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<div>
    <TreeSelect {dropdownStyle} multiple placeholder="small" size="small" style="width: 300px" {treeData} />
    <br />
    <br />
    <TreeSelect {dropdownStyle} multiple placeholder="default" size="default" style="width: 300px" {treeData} />
    <br />
    <br />
    <TreeSelect {dropdownStyle} multiple placeholder="large" size="large" style="width: 300px" {treeData} />
</div>

默认展开

defaultExpandAll 和 expandAll 均可以设置 TreeSelect 的默认展开/收起状态。二者的区别是，defaultExpandAll 只在初始化时生效，而 expandAll 不仅会在初始化时生效，当数据(treeData)发生动态更新时，expandAll 也仍然生效。

在下面的 demo 中，TreeData 更新后，defaultExpandAll 失效，expandAll 仍然生效。

代码

<script lang="ts">
    import { onMount } from 'svelte';
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const source: TreeNodeData[] = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    const firstStyle = 'width: 300px; margin-bottom: 20px';
    const secondStyle = 'width: 300px';
    let data = $state.raw<TreeNodeData[]>([]);

    onMount(() => {
        const timer = setTimeout(() => {
            data = source;
        }, 500);
        return () => clearTimeout(timer);
    });
</script>

<TreeSelect expandAll placeholder="expandAll" style={firstStyle} treeData={data} />
<TreeSelect defaultExpandAll placeholder="defaultExpandAll" style={secondStyle} treeData={data} />

禁用

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<div>
    <TreeSelect disabled {dropdownStyle} placeholder="禁用下拉菜单" {style} {treeData} />
    <br />
    <br />
    <TreeSelect disabled {dropdownStyle} {style} {treeData} value="Shanghai" />
    <br />
    <br />
    <TreeSelect disabled {dropdownStyle} multiple {style} {treeData} value={['Shanghai', 'North America']} />
</div>

严格禁用

可以使用 disableStrictly 来开启严格禁用。开启严格禁用后，当节点是 disabled 的时候，则不能通过子级或者父级的关系改变选中状态。

以下面的 demo 为例，节点"中国"开启了严格禁用，因此，当我们改变其父节点"亚洲"的选中状态时，也不会影响到节点"中国"的选中状态。

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    disabled: true,
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
                {
                    label: '日本',
                    value: 'Japan',
                    key: '0-1',
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<div>
    <TreeSelect disableStrictly {dropdownStyle} multiple {style} {treeData} value={['Shanghai']} />
</div>

受控

使用 bind:value 绑定选中值即为受控组件，选中值变化时自动回写；也可以传入 value 并配合 onChange 使用。TreeSelect 没有 defaultValue，单向 value={x} 只作初值，要完全受控用函数绑定 bind:value={get, set}；绑成 undefined 会清空选中。

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData, type TreeSelectValue } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
    let value = $state<TreeSelectValue | undefined>('Shanghai');
</script>

<TreeSelect bind:value {dropdownStyle} placeholder="请选择" {style} {treeData} />

节点选中关系

版本：>= 2.5.0

多选时，可以使用 checkRelation 来设置节点之间选中关系的类型，可选：'related'（默认）、'unRelated'。当选中关系为 'unRelated' 时，意味着节点之间的选中互不影响。

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<TreeSelect checkRelation="unRelated" {dropdownStyle} multiple {style} {treeData} value={['Asia']} />

开启搜索的展开受控

使用 bind:expandedKeys 绑定展开的节点即为展开受控组件，也可以传入 expandedKeys 并配合 onExpand 使用。TreeSelect 没有 defaultExpandedKeys。当展开受控时，如果开启 filterTreeNode 并进行搜索是不会再自动展开节点的，此时，节点的展开完全由 expandedKeys 来控制。你可以利用 onSearch 的入参 filteredExpandedKeys 来实现展开受控时的搜索展开效果。

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    let expandedKeys = $state<string[]>([]);
    const treeData: TreeNodeData[] = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
                {
                    label: '日本',
                    value: 'Japan',
                    key: '0-1',
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];

    const onSearch = (_input: string, filteredExpandedKeys: string[]) => {
        expandedKeys = [...filteredExpandedKeys, ...expandedKeys];
    };
</script>

<TreeSelect bind:expandedKeys dropdownStyle="max-height: 400px; overflow: auto" filterTreeNode {onSearch} style="width: 300px" {treeData} />

虚拟化

列表虚拟化，用于大量树节点的情况。开启后，动画效果将被关闭。

virtualize 是一个包含下列值的对象：

height: 高度值，如果为 string 必须有计算高度才能被渲染出来，即其父节点有 offsetHeight。建议传入数值。
width: 宽度值，默认 100%
itemSize: 每行的treeNode的高度，必传

如果带搜索框，建议开启 showFilteredOnly 减少多余节点的渲染。

共 0 个节点

代码

<script lang="ts">
    import { Button, TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    let treeData = $state.raw<TreeNodeData[]>([]);
    let total = $state(0);

    // x: nodes per level. y: nodes with children per level. z: depth (0 is one level).
    const generateData = (x = 5, y = 4, z = 3) => {
        const data: TreeNodeData[] = [];

        const fill = (level: number, preKey: string, nodes: TreeNodeData[]) => {
            const parents: string[] = [];
            for (let i = 0; i < x; i++) {
                const key = `${preKey}-${i}`;
                nodes.push({ label: `${key}-标签`, key: `${key}-key`, value: `${key}-value` });
                if (i < y) {
                    parents.push(key);
                }
            }
            if (level < 0) {
                return;
            }
            parents.forEach((key, index) => {
                const children: TreeNodeData[] = [];
                nodes[index].children = children;
                fill(level - 1, key, children);
            });
        };
        fill(z, '0', data);

        let count = 0;
        for (let n = z + 1; n >= 0; n--) {
            count += x * y ** n;
        }
        return { data, count };
    };

    const onGen = () => {
        const generated = generateData();
        treeData = generated.data;
        total = generated.count;
    };

    const dropdownStyle = 'overflow: hidden';
    // Dropdown height 300 minus the search box, minus the 8 * 2 padding; a set dropdown height fills the remaining space.
    const virtualize = { itemSize: 28, height: 236 };
</script>

<div style="padding: 0 20px">
    <Button onclick={onGen}>生成数据:</Button>
    <span>共 {total} 个节点</span>
    <br />
    <br />
    {#if treeData.length}
        <TreeSelect {dropdownStyle} filterTreeNode placeholder="Please select" showFilteredOnly style="width: 300px" {treeData} {virtualize} />
    {/if}
</div>

动态更新数据

代码

<script lang="ts">
    import { Button, TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
    // Only a new array updates the options, so the list is replaced as a whole.
    let treeData = $state.raw<TreeNodeData[]>([]);

    const add = () => {
        const itemLength = Math.floor(Math.random() * 5) + 1;
        treeData = Array.from({ length: itemLength }, (_, i) => {
            const length = Math.floor(Math.random() * 3);
            const children = Array.from({ length }, (_, ci) => ({
                key: `${i}-${ci}`,
                label: `Leaf-${i}-${ci}`,
                value: `${i}-${ci}`,
            }));
            return {
                key: `${i}`,
                label: `Item-${i}`,
                value: `${i}`,
                children,
            };
        });
    };
</script>

<TreeSelect {dropdownStyle} placeholder="请选择" {style} {treeData} />
<br />
<br />
<Button onclick={add}>动态改变数据</Button>

异步加载数据

通过设置 loadData 可以动态加载数据，此时需要在数据中传入 isLeaf 标明叶子节点。

代码

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    let treeData = $state.raw<TreeNodeData[]>([
        {
            label: 'Expand to load',
            value: '0',
            key: '0',
        },
        {
            label: 'Expand to load',
            value: '1',
            key: '1',
        },
        {
            label: 'Leaf Node',
            value: '2',
            key: '2',
            isLeaf: true,
        },
    ]);

    const updateTreeData = (list: TreeNodeData[], key: string | undefined, children: TreeNodeData[]): TreeNodeData[] =>
        list.map((node) => {
            if (node.key === key) {
                return { ...node, children };
            }
            if (node.children) {
                return { ...node, children: updateTreeData(node.children, key, children) };
            }
            return node;
        });

    const loadData = ({ key, children }: TreeNodeData) =>
        new Promise<void>((resolve) => {
            if (children) {
                resolve();
                return;
            }
            setTimeout(() => {
                treeData = updateTreeData(treeData, key, [
                    {
                        label: 'Child Node',
                        key: `${key}-0`,
                    },
                    {
                        label: 'Child Node',
                        key: `${key}-1`,
                    },
                ]);
                resolve();
            }, 1000);
        });
</script>

<TreeSelect {loadData} placeholder="请选择" style="width: 300px" {treeData} />

自定义 Trigger

如果默认的触发器样式满足不了你的需求，可以用 trigger snippet 自定义选择框的展示。

trigger snippet 的参数如下，类型为 TreeSelectTriggerSnippetProps:

interface TreeSelectTriggerSnippetProps {
    componentProps: TreeSelectProps; // 所有用户传给 TreeSelect 的 props
    disabled: boolean; // 是否禁用 TreeSelect
    value: TreeNodeData[]; // 已选中的 node 的数据
    inputValue: string; // 当前 input 框的输入值
    placeholder?: string; // placeholder
    // 用于清空值的函数；绑定在触发器内的控件上时传入点击事件，避免这次点击同时打开下拉
    onClear: (event?: MouseEvent) => void;
    // 删除单个 item 时调用的函数，以 item 的 key 作为入参
    onRemove: (key: string) => void;
    // 用于在 Input 框值更新时启动搜索，需要设置 filterTreeNode 非 false，
    // searchPosition 为 'trigger'
    onSearch: (inputValue: string) => void;
}

代码

<script lang="ts">
    import { Tag, TagInput, TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: '亚洲',
            value: '亚洲',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: '中国',
                    key: '0-0',
                    children: [
                        { label: '北京', value: '北京', key: '0-0-0' },
                        { label: '上海', value: '上海', key: '0-0-1' },
                    ],
                },
            ],
        },
        { label: '北美洲', value: '北美洲', key: '1' },
    ];

    const onChange = (value: unknown) => {
        console.log('onChange', value);
    };
</script>

<TreeSelect filterTreeNode multiple {onChange} placeholder="Custom Trigger" searchPosition="trigger" style="width: 300px" {treeData}>
    {#snippet trigger({ value, inputValue, onSearch, onRemove })}
        <TagInput {inputValue} onInputChange={onSearch} value={value.flatMap((item) => item.key ?? [])}>
            {#snippet tag({ value: key })}
                <Tag closable onClose={() => onRemove(key)} style="margin-inline-start: 2px" tagKey={key}>
                    {value.find((item) => item.key === key)?.label}
                </Tag>
            {/snippet}
        </TagInput>
    {/snippet}
</TreeSelect>

自定义渲染已选项

你可以通过 selectedItem 和 tag snippet 自定义选择框中已选项的渲染结构，两个 snippet 的参数相同，类型为 TreeSelectSelectedItemSnippetProps：item（节点数据）、index、disabled 和 onClose（移除该标签，单选时清除选中值）。

单选时 selectedItem 的内容就是选择框中显示的内容；内容为空时显示 placeholder
多选时 selectedItem 的内容会放进内置的 Tag 中渲染（带有背景色以及关闭按钮）；tag 替换整个 Tag，优先于 selectedItem，需要关闭按钮时把 onClose 接到自己的 Tag 上（见 demo，在 Tag 的 onClose 里调用它）
多选时两个 snippet 的内容为空，都不渲染该标签

单选

多选 + 标签内渲染

多选 + 替换整个标签

代码

<script lang="ts">
    import { Tag, TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
        {
            label: '南美洲',
            value: 'South America',
            key: '2',
        },
        {
            label: '南极洲',
            value: 'Antarctica',
            key: '3',
        },
    ];
</script>

<h4>单选</h4>
<TreeSelect style="width: 300px" {treeData}>
    {#snippet selectedItem({ item })}
        {item.label}
    {/snippet}
</TreeSelect>
<h4>多选 + 标签内渲染</h4>
<TreeSelect multiple style="width: 300px" {treeData}>
    {#snippet selectedItem({ item })}
        {item.label}
    {/snippet}
</TreeSelect>
<h4>多选 + 替换整个标签</h4>
<TreeSelect maxTagCount={2} multiple style="width: 300px" {treeData}>
    {#snippet tag({ item, onClose })}
        <Tag closable color="white" onClose={(event) => onClose(event)}>{item.value}</Tag>
    {/snippet}
</TreeSelect>

API参考

TreeSelect

Props

属性	说明	类型	默认值
arrowIcon	自定义右侧下拉箭头图标的 snippet，传 `null` 不显示箭头。`showClear` 开启且有已选值时，hover 优先显示清除图标。	`Snippet \| null`	-
autoAdjustOverflow	弹出层被遮挡时是否自动调整方向。	`boolean`	`true`
autoExpandParent	是否自动展开父节点。	`boolean`	`false`
autoMergeValue	是否合并值：开启后选中父节点时，值中不包含其后代节点。仅在 `leafOnly` 为 false 时生效。	`boolean`	`true`
borderless	是否使用无边框样式。	`boolean`	`false`
checkRelation	多选时节点选中状态的关系，可选 `related`、`unRelated`。`unRelated` 时节点之间的选中互不影响。	`CheckRelation`	`"related"`
clearIcon	自定义清除按钮图标的 snippet，`showClear` 为 true 时有效。	`Snippet`	-
clickToHide	选中后是否自动关闭下拉面板，仅在单选时生效。	`boolean`	`true`
clickTriggerToHide	面板打开时，点击触发器后是否关闭面板。	`boolean`	`true`
defaultExpandAll	初始化时是否展开全部节点。数据（`treeData`）变化后此属性不再生效，需要时使用 `expandAll`。	`boolean`	`false`
defaultOpen	挂载时是否打开下拉面板。TreeSelect 没有受控的打开状态，需要关闭时调用 `close()`。	`boolean`	`false`
disabled	是否禁用。	`boolean`	-
disableStrictly	严格禁用：节点禁用时，它的选中状态不会因为父或子节点的变化而改变。	`boolean`	`false`
dropdownClassName	下拉面板的类名。	`string`	-
dropdownMatchSelectWidth	下拉面板的最小宽度是否与选择框相同。	`boolean`	`true`
dropdownStyle	下拉面板的内联样式字符串。	`string`	-
emptyContent	无数据或搜索无结果时的空状态内容的 snippet，未设置时显示语言包中的文案；传 `null` 时不显示。	`Snippet \| null`	-
expandAction	节点的展开方式，可选 `false`（只有点击展开图标才展开）、`click`、`doubleClick`。	`TreeSelectExpandAction`	`false`
expandAll	是否默认展开全部节点。数据（`treeData`）变化后仍受此属性影响。	`boolean`	`false`
expandedKeys	展开的节点 key，可 `bind:expandedKeys`，展开后显示直接子节点。不传时由组件自行管理；要完全受控用函数绑定 `bind:expandedKeys={get, set}`。没有 defaultExpandedKeys。	`string[]`	-
expandIcon	自定义展开图标的 snippet，参数含 `class`、`onClick` 与 `expanded`，用法同 Tree 的 `expandIcon`；只渲染一个元素时，组件会给它加上展开按钮的类名与点击事件。	`Type`	-
filterTreeNode	是否可搜索，也可以传入函数自定义搜索逻辑，函数的第三个参数为节点数据 `data`。	`Type`	`false`
fullLabel	自定义整行内容的 snippet，外层仍是带 `id`、`role="treeitem"` 与状态属性的行元素，用法同 Tree 的 `fullLabel`。	`Type`	-
icon	自定义节点图标的 snippet，参数 `{ item, level, expanded, isLeaf, loading, selected, checked, halfChecked }`，用法同 Tree 的 `icon`。	`Type`	-
insetLabel	选择框内标签的 snippet，同时作为下拉树的名称。设置 `prefix` 时不渲染，也不作为可访问名称。	`Snippet`	-
insetLabelId	`insetLabel` 外层元素的 id，供 `aria-labelledby` 引用。	`string`	-
keyMaps	自定义节点中 key、label、value、disabled、children、isLeaf 与 icon 字段的名称。如果自定义了 label 的字段名并开启搜索，需要把 `treeNodeFilterProp` 设为 `treeData` 中的某个字段，或通过 `filterTreeNode` 传入自定义搜索函数。	`TreeSelectKeyMapProps`	-
label	自定义节点文本的 snippet，参数 `{ item, label, searchWord }`：节点数据、原文本与搜索词，用法同 Tree 的 `label`。	`Type`	-
labelEllipsis	标签溢出时是否省略。未设置时，虚拟化模式下为 true，否则为 false。	`boolean`	-
leafOnly	多选时是否只展示叶子节点的标签，`onChange` 的入参也只包含叶子节点的值。	`boolean`	`false`
loadData	异步加载子节点，返回 Promise。需要在 `treeData` 中用 `isLeaf` 标明叶子节点。	`Type`	-
loadedKeys	已加载完成的节点 key，可 `bind:loadedKeys`，与 `loadData` 配合使用。	`string[]`	-
maxTagCount	最多显示的标签数量，超出部分以 +N 的形式展示。	`number`	-
motion	下拉面板打开和关闭时是否带动画。	`boolean`	`true`
motionExpand	节点展开和收起时是否带动画。	`boolean`	`true`
multiple	是否多选。	`boolean`	`false`
onBlur	TreeSelect 失去焦点时的回调，每次 onFocus 之后触发一次。焦点离开触发器与下拉时入参为原生 FocusEvent，点击外部时为原生 MouseEvent，选中后关闭下拉时为选中的点击或按键事件。	`Type`	-
onChange	选中值变化时的回调，入参为节点的 value（多选时为数组）、节点数据与事件。关闭标签时事件为 null，键盘选中时为 KeyboardEvent，清空单选时值为 `undefined`。`onChangeWithObject` 为 true 时，值与节点都是节点数据。	`Type`	-
onChangeWithObject	`value` 与 `onChange` 的入参是否为节点的全部属性。为 true 时，`value` 与 `onChange` 的值和节点都是节点数据。	`boolean`	`false`
onClear	点击清除按钮时的回调。	`Type`	-
onExpand	展开或收起节点时的回调，入参为展开的 key 数组与 `{ expanded, node }`。	`Type`	-
onFocus	焦点从外部进入触发器（包括搜索框与清除按钮）或下拉面板时的回调，入参为原生 FocusEvent；在它们之间移动焦点不会再次触发。选中后关闭下拉，又通过点击或按键重新打开时，同样触发一次，入参为该点击或按键事件；挂载时 `searchAutoFocus` 聚焦的入参为 `null`。	`Type`	-
onLoad	节点加载完成时的回调。	`Type`	-
onSearch	搜索值变化时的回调。入参为搜索值、`filteredExpandedKeys`（因搜索或 value 而展开的节点 key，展开受控时可用于实现搜索展开）与 `filteredNodes`（命中搜索的节点）。	`Type`	-
onSelect	节点被选中或取消选中时的回调，入参为节点的 key、是否选中与节点数据。	`Type`	-
onVisibleChange	下拉面板显示或隐藏时的回调，入参为是否可见。	`Type`	-
optionListStyle	选项列表的内联样式字符串，落在 `role="tree"` 元素上。	`string`	-
outerBottomSlot	渲染在下拉面板底部的 snippet，与选项列表同级。	`Snippet`	-
outerTopSlot	渲染在下拉面板顶部的 snippet，与选项列表同级。开启 `filterTreeNode` 时它会替代搜索框，需要自定义搜索时可以通过 `bind:this` 的 `search` 方法实现。	`Snippet`	-
placeholder	输入框的占位文本。	`string`	-
position	弹出层的位置，可选值参考 Tooltip 的 position，默认 `bottomLeft`（RTL 下为 `bottomRight`）。	`Position`	-
prefix	选择框前面内容的 snippet。	`Snippet`	-
preventScroll	组件内部调用 `focus` 时是否阻止浏览器滚动文档以显示新聚焦的元素，不作用于用户传入的元素。	`boolean`	-
remote	是否开启远程搜索。开启后输入时不做本地过滤，只触发 `onSearch`，由调用方获取数据并更新 `treeData`。	`boolean`	`false`
restTagsPopoverProps	超出 `maxTagCount` 后折叠标签的 Popover 配置。	`PopoverProps`	-
search	替换搜索框的 snippet，参数带有 ARIA 属性（`aria-activedescendant`、`aria-controls`、`aria-autocomplete`、名称；搜索框在触发器内时为整组 combobox 属性）、`class`、`value`、`placeholder`、`showClear`、`onChange(value)` 等，请用 `{...props}` 展开到 Semi 的 Input 上。传 `false` 时不渲染搜索框，`filterTreeNode` 仍会过滤。	`Type`	-
searchAutoFocus	搜索框挂载后是否自动聚焦。	`boolean`	`false`
searchPlaceholder	下拉面板中搜索框的占位文本。	`string`	-
searchPosition	搜索框的位置，可选 `dropdown`、`trigger`。	`TreeSelectSearchPosition`	`"dropdown"`
selectedItem	自定义已选项的 snippet，参数 `{ item, index, disabled, onClose }`。单选时内容就是选择框中显示的内容，内容为空时显示 `placeholder`；多选时内容放进内置的 Tag 中，内容为空则不渲染该标签。`onClose` 移除该标签，单选时清除选中值。	`Type`	-
showClear	值不为空时，触发器是否显示清除按钮。	`boolean`	`false`
showFilteredOnly	搜索时是否只展示过滤后的结果。	`boolean`	`false`
showLine	选项面板中的节点是否显示连接线。	`boolean`	`false`
showRestTagsPopover	标签数量超过 `maxTagCount` 后，hover 到 +N 时是否用 Popover 展示其余标签。	`boolean`	`false`
showSearchClear	下拉面板中的搜索框是否支持清空。	`boolean`	`true`
size	输入框的尺寸，可选 `large`、`small`、`default`。	`TreeSelectSize`	-
stopPropagation	是否阻止下拉面板上的点击事件冒泡。	`boolean \| string`	`true`
suffix	选择框后面内容的 snippet。	`Snippet`	-
tag	多选时替换整个标签的 snippet，参数同 `selectedItem`，优先于 `selectedItem`。需要关闭按钮时把 `onClose` 接到自己的 Tag 上。	`Type`	-
treeData	节点数据，key 在整棵树内唯一。只有传入新数组才会更新，原地修改数组或节点不会生效。	`TreeNodeData[]`	`[]`
treeNodeFilterProp	搜索时匹配的 `TreeNodeData` 属性。	`string`	`"label"`
treeNodeLabelProp	显示文本所用的 `TreeNodeData` 属性。	`string`	`"label"`
trigger	替换触发器内容的 snippet，参数含 `value`（已选节点的数据）、`inputValue`、`placeholder`、`disabled`、`componentProps`（传给 TreeSelect 的全部属性）、`onSearch`（更新搜索词，需要 `filterTreeNode` 且 `searchPosition` 为 `trigger`）、`onClear`（绑在触发器内的控件上时传入点击事件，避免同时打开下拉）与 `onRemove`（以节点 key 取消勾选）。	`Type`	-
triggerTagWrap	已选标签在触发器内是否允许换行。仅在 `multiple`、开启搜索且 `searchPosition` 为 `trigger` 时生效。	`boolean`	`false`
validateStatus	校验状态，可选 `warning`、`error`、`default`，只影响组件的背景色。	`ValidateStatus`	-
value	当前选中的值，可 `bind:value`；多选时为数组。不传时由组件自行管理；单向 `value={x}` 只作初值，要完全受控用函数绑定 `bind:value={get, set}`；绑成 `undefined` 会清空选中。没有 defaultValue。	`TreeSelectValue`	-
virtualize	虚拟列表配置，对象包含 `itemSize`（必传，每行的高度）、`height`（下拉高度，建议传数值）与 `width`。虚拟化时动画关闭。	`TreeVirtualize`	-

Methods

方法	说明	类型
close	关闭下拉面板。	`Type`
search	按输入了该值来搜索，先打开下拉面板，需要同时设置 `filterTreeNode`。	`Type`

Svelte 版的 TreeSelect 没有 className 属性：class（字符串、数组或对象）、style（字符串）、data-* 与其他未声明的属性和事件处理（例如 onclick）落在根元素（触发器）上，onkeydown 在组件处理完按键之后调用。aria-label、aria-labelledby、aria-describedby、aria-errormessage、aria-invalid、aria-required 落在当前的 combobox 上（见 ARIA）。小写的 onchange、onselect、onload、onfocus、onblur 不是原生透传，请使用回调 onChange、onSelect、onLoad、onFocus、onBlur。dropdownStyle、optionListStyle 是样式字符串。value、expandedKeys、loadedKeys 可绑定，没有 defaultValue、defaultExpandedKeys；multiple 默认值可以由全局默认值设置。

TreeNodeData

不同 TreeNodeData 的 key 值要求必填且唯一。label 允许重复。value 值非必填。此时 bind:value、onChange 及 onChangeWithObject 中所取的 value 属性值将改为 key 值。为了保证行为的符合预期，treeData 中的 value 值或者全部不填写，或者全部填写且唯一，不建议混写。

属性	说明	类型	默认值
value	属性值	string\|number	-
label	展示的文本，自定义内容使用 `label` snippet	string\|number	-
disabled	是否禁用，多选状态下支持	boolean	false
key	required且要求唯一	string	-
isLeaf	是否为叶子节点	boolean	-
children	子节点	TreeNodeData[]	-

节点图标使用 icon snippet 提供，不在数据中声明。

Methods

TreeSelect 通过 bind:this 暴露 search(value) 和 close() 两个方法，类型为 TreeSelectHandle。search 按输入了该值来搜索，先打开下拉面板，需要同时设置 filterTreeNode；close 关闭下拉面板。如果需要在外部自定义搜索框，可以在自定义搜索框值变更时主动调用 search，改变筛选结果。

<script lang="ts">
    import { TreeSelect, type TreeSelectHandle } from '@fibrae/semi-ui-svelte';

    let treeSelect = $state<TreeSelectHandle>();
</script>

<TreeSelect bind:this={treeSelect} filterTreeNode {treeData} />
<button onclick={() => treeSelect?.close()}>关闭</button>

Accessibility

ARIA

按 ARIA 1.2 的 combobox 写法，任一时刻只有一个元素是 combobox。它的名称按优先级取：aria-labelledby、aria-label、实际渲染出的 insetLabel（Vue 为 #insetLabel，未传 insetLabelId 时组件生成 id；有 prefix 时 insetLabel 不渲染，也不作名称来源），都没有时取语言包中的名称:
- 不可搜索或 searchPosition="dropdown" 时，触发器是 select-only combobox；下拉内的搜索框保持文本框角色，带 aria-controls、aria-autocomplete、aria-activedescendant
- searchPosition="trigger" 时，搜索框是 combobox 和唯一的 Tab 停靠点，带 aria-autocomplete="list"，触发器不再有角色。单选时搜索框在输入前为空，已选文本以 aria-describedby 关联为它的描述。点击触发器任意位置会把焦点交给搜索框;
TreeSelect 允许用户设置 aria-describedby、aria-errormessage、aria-invalid、aria-labelledby、aria-required，另外，Form 会为 Form.TreeSelect 自动设置这些属性;
下拉中 role="tree" 的列表与 combobox 使用同一个名称来源：同一组 aria-labelledby、同一个 aria-label 或同一个 insetLabel；都没有时与 combobox 一样取语言包中的名称;

aria-label、aria-labelledby、aria-describedby、aria-errormessage、aria-invalid、aria-required 落在当前的 combobox 上：不可搜索时是根元素，单选且搜索框在触发器内时是搜索框的 input，多选且搜索框在触发器内时是标签输入框。设置了 aria-labelledby 时，combobox 不再补默认的 aria-label；只有 insetLabel snippet 时 combobox 的 aria-labelledby 指向它;
下拉中的节点与 Tree 相同：role="treeitem"，带 aria-level、aria-setsize、aria-posinset、aria-disabled，可展开的节点带 aria-expanded；单选时用 aria-selected，多选时用 aria-checked（半选为 mixed）。fullLabel snippet 的内容由带 id、role="treeitem" 和这些状态的 li 包住;

节点前的展开箭头和多选复选框只是状态的图示，对读屏软件隐藏，也不接收焦点。

键盘交互

TreeSelect 按 WAI-ARIA Combobox 处理键盘，弹出层是一棵树：焦点始终留在触发器或搜索框上，aria-activedescendant 指向当前节点，当前节点显示焦点环。下拉刚打开时没有当前节点。

下拉关闭时：ArrowDown、ArrowUp、Enter、Space 打开下拉；Home、End 打开下拉并移到第一个、最后一个可见节点
ArrowDown、ArrowUp：移到下一个、上一个可见节点，第一次按 ArrowDown 移到第一个节点；Home、End：移到第一个、最后一个可见节点
ArrowRight：展开收起的节点；节点已展开时移到它的第一个子节点（RTL 下与 ArrowLeft 互换）
ArrowLeft：收起展开的节点；否则移到父节点
Enter、Space：选中当前节点，多选时勾选或取消勾选；禁用节点不响应
输入字符：下拉打开时，从当前节点往后，移到第一个以输入内容开头的可见节点；快速连续输入的字符合成一个搜索词。下拉关闭时不响应
Esc：关闭下拉

焦点在搜索框里时，只有 ArrowDown、ArrowUp、Enter 用于移动和选择，其余按键（含字符、Space、Home、End、ArrowLeft、ArrowRight）用于编辑文字。

search snippet 的参数里带有这组 ARIA 属性（aria-activedescendant、aria-controls、aria-autocomplete、名称；在触发器内时为整组 combobox 属性，含 role、aria-expanded），请用 {...props} 把整个参数对象展开到 Semi 的 Input 上，否则读屏软件不会读出当前节点。组件会自己在 snippet 渲染的内容里找到文本框来聚焦，所以不需要传 ref。

showClear 开启、有已选值或搜索文本且未禁用时，触发器内渲染清除按钮。它是原生 button，名称为语言包中的「清空已选值」，在 hover、下拉打开或焦点位于 TreeSelect 内时显示。从触发器或搜索框按 Tab 移到清除按钮，Enter 或 Space 清空，效果与鼠标点击相同，清空后焦点回到触发器或搜索框。多选时也可在搜索框中用 Backspace 删除标签。

示例:

<TreeSelect aria-label="example treeSelect" {treeData} />

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$color-treeSelect_default-bg-default	var(--semi-color-fill-0)	树选择器选择框背景颜色 - 默认
$color-treeSelect_default-bg-hover	var(--semi-color-fill-1)	树选择器选择框背景颜色 - 悬停
$color-treeSelect_default-bg-active	var(--semi-color-fill-2)	树选择器选择框背景颜色 - 按下
$color-treeSelect_default-bg-focus	var(--semi-color-fill-0)	树选择器选择框背景颜色 - 选中
$color-treeSelect_default-border-default	transparent	树选择器选择框描边颜色 - 默认
$color-treeSelect_selection-text-default	var(--semi-color-text-0)	树选择器选择框回填内容文本颜色 - 默认
$color-treeSelect_default-icon-default	var(--semi-color-text-2)	树选择器选择框图标颜色 - 默认
$color-treeSelect_default-icon-hover	var(--semi-color-primary-hover)	树选择器选择框清空按钮颜色 - 悬停
$color-treeSelect_default-icon-active	var(--semi-color-primary-active)	树选择器选择框清空按钮颜色 - 按下
$color-treeSelect_default-border-hover	transparent	树选择器选择框描边颜色 - 悬浮
$color-treeSelect_default-border-focus	var(--semi-color-focus-border)	树选择器选择框描边颜色 - 选中
$color-treeSelect_search-border-default	var(--semi-color-fill-0)	树选择器菜单搜索框描边颜色 - 默认
$color-treeSelect_tag_disabled-bg-default	transparent	禁用树选择器菜单标签背景颜色
$color-treeSelect_input_disabled-bg-default	var(--semi-color-disabled-fill)	禁用树选择器选择框背景颜色
$color-treeSelect_input_disabled-text-default	var(--semi-color-disabled-text)	禁用树选择器选择框文本颜色
$color-treeSelect_input_disabled-bg-hover	var(--semi-color-disabled-fill)	禁用树选择器选择框背景颜色 - 悬浮
$color-treeSelect_input_placeholder-text-default	var(--semi-color-text-2)	树选择器选择框占位文本颜色
$color-treeSelect_warning-bg-default	var(--semi-color-warning-light-default)	警告树选择器选择框背景颜色 - 默认
$color-treeSelect_warning-border-default	var(--semi-color-warning-light-default)	警告树选择器选择框描边颜色 - 默认
$color-treeSelect_warning-bg-hover	var(--semi-color-warning-light-hover)	警告树选择器选择框背景颜色 - 悬浮
$color-treeSelect_warning-border-hover	var(--semi-color-warning-light-hover)	警告树选择器选择框描边颜色 - 悬浮
$color-treeSelect_warning-bg-focus	var(--semi-color-warning-light-default)	警告树选择器选择框背景颜色 - 选中
$color-treeSelect_warning-border-focus	var(--semi-color-warning)	警告树选择器选择框描边颜色 - 选中
$color-treeSelect_warning-bg-active	var(--semi-color-warning-light-active)	警告树选择器选择框背景颜色 - 激活
$color-treeSelect_warning-border-active	var(--semi-color-warning-light-active)	警告树选择器选择框描边颜色 - 激活
$color-treeSelect_danger-bg-default	var(--semi-color-danger-light-default)	错误树选择器选择框背景颜色 - 默认
$color-treeSelect_danger-border-default	var(--semi-color-danger-light-default)	错误树选择器选择框描边颜色 - 默认
$color-treeSelect_danger-bg-hover	var(--semi-color-danger-light-hover)	错误树选择器选择框背景颜色 - 悬浮
$color-treeSelect_danger-border-hover	var(--semi-color-danger-light-hover)	错误树选择器选择框描边颜色 - 悬浮
$color-treeSelect_danger-bg-focus	var(--semi-color-danger-light-default)	错误树选择器选择框背景颜色 - 选中
$color-treeSelect_danger-border-focus	var(--semi-color-danger)	错误树选择器选择框描边颜色 - 选中
$color-treeSelect_danger-bg-active	var(--semi-color-danger-light-active)	错误树选择器选择框背景颜色 - 激活
$color-treeSelect_danger-border-active	var(--semi-color-danger-light-active)	错误树选择器选择框描边颜色 - 激活
$radius-treeSelect	var(--semi-border-radius-small)	树选择器圆角
$width-treeSelect-border	1px	树选择器描边宽度
$width-treeSelect_search_wrapper-border	1px	树选择器搜索框描边宽度
$width-treeSelect_hover-border	$border-thickness-control-focus	树选择器选择框描边宽度 - 悬浮
$width-treeSelect_focus-border	$width-treeSelect_hover-border	树选择器选择框描边宽度 - 选中
$width-treeSelect_default	80px	树选择器最小宽度
$height-treeSelect_default	$height-control-default	树选择器选择器高度 - 默认
$font-treeSelect_default-lineHeight	$height-treeSelect_default	树选择器选择器文本行高
$font-treeSelect_default-fontWeight	$font-weight-regular	树选择器选择器文本字重
$height-treeSelect_small	$height-control-small	小尺寸树选择器选择器高度
$font-treeSelect_small-lineHeight	$height-treeSelect_small	小尺寸树选择器选择器文本行高
$height-treeSelect_large	$height-control-large	大尺寸树选择器选择器文本行高
$font-treeSelect_large-lineHeight	$height-treeSelect_large	大尺寸树选择器选择器文本行高
$font-treeSelect_prefix_suffix_fontWeight	$font-weight-bold	树选择器前缀后缀文本字重
$spacing-treeSelect_selection_tagInput_wrapper-paddingX	$spacing-extra-tight	树选择器多选标签容器水平内边距
$spacing-treeSelect_selection_tagInput_empty-marginLeft	$spacing-extra-tight	树选择器多选标签容器为空时左侧外边距
$spacing-treeSelect_selection_tagInput_notEmpty-marginLeft	-$spacing-extra-tight	树选择器多选标签容器不为空时左侧外边距
$spacing-treeSelect_selection-paddingLeft	$spacing-base-tight	树选择器单选左侧内边距
$spacing-treeSelect_tag-marginX	$spacing-super-tight	树选择器多选标签水平外边距
$spacing-treeSelect_tag-marginY	1px	树选择器多选标签垂直外边距
$spacing-treeSelect_selection_multiple-paddingLeft	4px	树选择器多选标签左侧内边距
$spacing-treeSelect_placeholder_multiple-paddingLeft	8px	树选择器多选占位文本左侧外边距
$spacing-treeSelect_prefix_text-marginY	0px	树选择器前缀文本垂直外边距
$spacing-treeSelect_prefix_text-marginX	$spacing-base-tight	树选择器前缀文本水平外边距
$spacing-treeSelect_prefix_icon-marginY	0px	树选择器前缀图标垂直外边距
$spacing-treeSelect_prefix_icon-marginX	$spacing-tight	树选择器前缀图标水平外边距
$spacing-treeSelect_selection_withSuffix-paddingRight	0px	树选择器有后缀时内容右侧内边距
$color-treeSelect_selection_TriggerSearchItem_disabled-text-default	var(--semi-color-disabled-text)	带搜索的树选择器触发器占位文本默认颜色
$color-treeSelect_inputTrigger-border-default	none	带搜索的树选择器触发器描边颜色
$color-treeSelect_inputTrigger-bg-default	transparent	带搜索的树选择器触发器背景颜色
$color-treeSelect_prefix_suffix_text-default	var(--semi-color-text-2)	带搜索的树选择器前后缀文本颜色
$width-treeSelect_arrow	32px	树选择器展开箭头宽度
$width-treeSelect_option	230px	树选择器菜单项宽度
$height-treeSelect_popover	300px	树选择器菜单高度
$height-treeSelect_selection_tagInput_wrapper_small	22px	树选择器多选搜索，搜索框在选择框时选择框最小高度 - 小尺寸
$height-treeSelect_selection_tagInput_wrapper_default	30px	树选择器多选搜索，搜索框在选择框时选择框最小高度 - 默认尺寸
$height-treeSelect_selection_tagInput_wrapper_large	38px	树选择器多选搜索，搜索框在选择框时选择框最小高度 - 大尺寸