트리 셀렉트

트리 셀렉트 (TreeSelect)

Select와 비슷하지만, 값을 트리 구조로 제공하는 컴포넌트입니다. 계층 구조의 데이터를 선택할 때 적합해요.

출처: 문서

본문

언제 사용하나요 (When To Use)

TreeSelect는 Select와 비슷하지만 값이 트리 구조로 제공됩니다. 계층적으로 정의된 데이터라면 이 컨트롤을 사용하기에 적합합니다. 회사 조직도, 디렉토리 구조 등이 그 예입니다.

예제 (Examples)

기본 (Basic)

가장 기본적인 사용법입니다.

import React, { useState } from 'react';
import { TreeSelect } from 'antd';
import type { TreeSelectProps } from 'antd';

const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'leaf1',
          },
          {
            value: 'leaf2',
            title: 'leaf2',
          },
          {
            value: 'leaf3',
            title: 'leaf3',
          },
          {
            value: 'leaf4',
            title: 'leaf4',
          },
          {
            value: 'leaf5',
            title: 'leaf5',
          },
          {
            value: 'leaf6',
            title: 'leaf6',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'leaf11',
            title: <b style={{ color: '#08c' }}>leaf11</b>,
          },
        ],
      },
    ],
  },
];
const App: React.FC = () => {
  const [value, setValue] = useState<string>();

  const onChange = (newValue: string) => {
    setValue(newValue);
  };

  const onPopupScroll: TreeSelectProps['onPopupScroll'] = (e) => {
    console.log('onPopupScroll', e);
  };

  return (
    <TreeSelect
      showSearch
      style={{ width: '100%' }}
      value={value}
      styles={{
        popup: {
          root: { maxHeight: 400, overflow: 'auto' },
        },
      }}
      placeholder="Please select"
      allowClear
      treeDefaultExpandAll
      onChange={onChange}
      treeData={treeData}
      onPopupScroll={onPopupScroll}
    />
  );
};

export default App;

다중 선택 (Multiple Selection)

다중 선택 사용법입니다.

import React, { useState } from 'react';
import { TreeSelect } from 'antd';

const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'my leaf',
          },
          {
            value: 'leaf2',
            title: 'your leaf',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'sss',
            title: <b style={{ color: '#08c' }}>sss</b>,
          },
        ],
      },
    ],
  },
];
const App: React.FC = () => {
  const [value, setValue] = useState<string>();

  const onChange = (newValue: string) => {
    console.log(newValue);
    setValue(newValue);
  };

  return (
    <TreeSelect
      showSearch
      style={{ width: '100%' }}
      value={value}
      styles={{
        popup: {
          root: { maxHeight: 400, overflow: 'auto' },
        },
      }}
      placeholder="Please select"
      allowClear
      multiple
      treeDefaultExpandAll
      onChange={onChange}
      treeData={treeData}
    />
  );
};

export default App;

트리 데이터에서 생성 (Generate from tree data)

treeData 속성으로 트리 구조를 채울 수 있습니다. 트리 콘텐츠를 빠르고 쉽게 제공하는 방법입니다.

import React, { useState } from 'react';
import { TreeSelect } from 'antd';

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-1',
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
  },
];

const App: React.FC = () => {
  const [value, setValue] = useState<string>();

  const onChange = (newValue: string) => {
    console.log(newValue);
    setValue(newValue);
  };

  return (
    <TreeSelect
      style={{ width: '100%' }}
      value={value}
      styles={{
        popup: {
          root: { maxHeight: 400, overflow: 'auto' },
        },
      }}
      treeData={treeData}
      placeholder="Please select"
      treeDefaultExpandAll
      onChange={onChange}
    />
  );
};

export default App;

체크 가능 (Checkable)

다중 및 체크 가능한 형태입니다.

import React, { useState } from 'react';
import { TreeSelect } from 'antd';

const { SHOW_PARENT } = TreeSelect;

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: 'Child Node3',
        value: '0-1-0',
        key: '0-1-0',
      },
      {
        title: 'Child Node4',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: 'Child Node5',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
];

const App: React.FC = () => {
  const [value, setValue] = useState(['0-0-0']);

  const onChange = (newValue: string[]) => {
    console.log('onChange ', newValue);
    setValue(newValue);
  };

  const tProps = {
    treeData,
    value,
    onChange,
    treeCheckable: true,
    showCheckedStrategy: SHOW_PARENT,
    placeholder: 'Please select',
    style: {
      width: '100%',
    },
  };

  return <TreeSelect {...tProps} />;
};

export default App;

비동기 로딩 (Asynchronous loading)

트리 노드를 비동기로 로딩합니다.

import React, { useState } from 'react';
import type { GetProp, TreeSelectProps } from 'antd';
import { TreeSelect } from 'antd';

type DefaultOptionType = GetProp<TreeSelectProps, 'treeData'>[number];

const App: React.FC = () => {
  const [value, setValue] = useState<string>();
  const [treeData, setTreeData] = useState<Omit<DefaultOptionType, 'label'>[]>([
    { id: 1, pId: 0, value: '1', title: 'Expand to load' },
    { id: 2, pId: 0, value: '2', title: 'Expand to load' },
    { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
  ]);

  const genTreeNode = (parentId: number, isLeaf = false) => {
    const random = Math.random().toString(36).substring(2, 6);
    return {
      id: random,
      pId: parentId,
      value: random,
      title: isLeaf ? 'Tree Node' : 'Expand to load',
      isLeaf,
    };
  };

  const onLoadData: TreeSelectProps['loadData'] = ({ id }) =>
    new Promise((resolve) => {
      setTimeout(() => {
        setTreeData(
          treeData.concat([genTreeNode(id, false), genTreeNode(id, true), genTreeNode(id, true)]),
        );
        resolve(undefined);
      }, 300);
    });

  const onChange = (newValue: string) => {
    console.log(newValue);
    setValue(newValue);
  };

  return (
    <TreeSelect
      treeDataSimpleMode
      style={{ width: '100%' }}
      value={value}
      styles={{
        popup: {
          root: { maxHeight: 400, overflow: 'auto' },
        },
      }}
      placeholder="Please select"
      onChange={onChange}
      loadData={onLoadData}
      treeData={treeData}
    />
  );
};

export default App;

트리 라인 표시 (Show Tree Line)

treeLine을 사용해 라인 스타일을 표시합니다.

import React, { useState } from 'react';
import { CarryOutOutlined } from '@ant-design/icons';
import { Space, Switch, TreeSelect } from 'antd';

const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    icon: <CarryOutOutlined />,
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        icon: <CarryOutOutlined />,
        children: [
          {
            value: 'leaf1',
            title: 'leaf1',
            icon: <CarryOutOutlined />,
          },
          {
            value: 'leaf2',
            title: 'leaf2',
            icon: <CarryOutOutlined />,
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        icon: <CarryOutOutlined />,
        children: [
          {
            value: 'sss',
            title: 'sss',
            icon: <CarryOutOutlined />,
          },
        ],
      },
    ],
  },
];

const App: React.FC = () => {
  const [treeLine, setTreeLine] = useState(true);
  const [showLeafIcon, setShowLeafIcon] = useState(false);
  const [showIcon, setShowIcon] = useState<boolean>(false);

  return (
    <Space vertical>
      <Switch
        checkedChildren="showIcon"
        unCheckedChildren="showIcon"
        checked={showIcon}
        onChange={() => setShowIcon(!showIcon)}
      />
      <Switch
        checkedChildren="treeLine"
        unCheckedChildren="treeLine"
        checked={treeLine}
        onChange={() => setTreeLine(!treeLine)}
      />
      <Switch
        disabled={!treeLine}
        checkedChildren="showLeafIcon"
        unCheckedChildren="showLeafIcon"
        checked={showLeafIcon}
        onChange={() => setShowLeafIcon(!showLeafIcon)}
      />
      <TreeSelect
        treeLine={treeLine && { showLeafIcon }}
        style={{ width: 300 }}
        treeData={treeData}
        treeIcon={showIcon}
      />
    </Space>
  );
};

export default App;

배치 (Placement)

placement로 팝업의 위치를 직접 지정할 수 있습니다.

import React, { useState } from 'react';
import type { GetProp, RadioChangeEvent, TreeSelectProps } from 'antd';
import { Radio, TreeSelect } from 'antd';

type SelectCommonPlacement = GetProp<TreeSelectProps, 'placement'>;

const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'leaf1',
          },
          {
            value: 'leaf2',
            title: 'leaf2',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'leaf3',
            title: <b style={{ color: '#08c' }}>leaf3</b>,
          },
        ],
      },
    ],
  },
];
const App: React.FC = () => {
  const [placement, setPlacement] = useState<SelectCommonPlacement>('topLeft');

  const placementChange = (e: RadioChangeEvent) => {
    setPlacement(e.target.value);
  };

  return (
    <>
      <Radio.Group value={placement} onChange={placementChange}>
        <Radio.Button value="topLeft">topLeft</Radio.Button>
        <Radio.Button value="topRight">topRight</Radio.Button>
        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
      </Radio.Group>
      <br />
      <br />

      <TreeSelect
        showSearch
        styles={{
          popup: {
            root: {
              maxHeight: 400,
              overflow: 'auto',
              minWidth: 300,
            },
          },
        }}
        placeholder="Please select"
        popupMatchSelectWidth={false}
        placement={placement}
        allowClear
        treeDefaultExpandAll
        treeData={treeData}
      />
    </>
  );
};

export default App;

변형 (Variants)

TreeSelect의 변형은 outlined, filled, borderless, underlined 네 가지입니다.

import React from 'react';
import { Flex, TreeSelect } from 'antd';

const style: React.CSSProperties = {
  width: '100%',
  maxWidth: '100%',
};

const App: React.FC = () => {
  return (
    <Flex vertical gap="medium">
      <TreeSelect style={style} placeholder="Please select" variant="borderless" />
      <TreeSelect style={style} placeholder="Please select" variant="filled" />
      <TreeSelect style={style} placeholder="Please select" variant="outlined" />
      <TreeSelect style={style} placeholder="Please select" variant="underlined" />
    </Flex>
  );
};

export default App;

상태 (Status)

status로 TreeSelect에 상태를 추가합니다. error 또는 warning이 될 수 있습니다.

import React from 'react';
import { Space, TreeSelect } from 'antd';

const App: React.FC = () => (
  <Space vertical style={{ width: '100%' }}>
    <TreeSelect status="error" style={{ width: '100%' }} placeholder="Error" />
    <TreeSelect
      status="warning"
      style={{ width: '100%' }}
      multiple
      placeholder="Warning multiple"
    />
  </Space>
);

export default App;

최대 개수 (Max Count)

maxCount prop으로 선택할 수 있는 최대 항목 수를 제어할 수 있습니다. 한도를 초과하면 옵션들이 비활성화됩니다.

import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import { TreeSelect } from 'antd';

const MAX_COUNT = 3;

const treeData = [
  {
    title: 'Parent 1',
    value: 'parent1',
    children: [
      {
        title: 'Child 1-1',
        value: 'child1-1',
      },
      {
        title: 'Child 1-2',
        value: 'child1-2',
      },
    ],
  },
  {
    title: 'Parent 2',
    value: 'parent2',
    children: [
      {
        title: 'Child 2-1',
        value: 'child2-1',
      },
      {
        title: 'Child 2-2',
        value: 'child2-2',
      },
    ],
  },
];

const App: React.FC = () => {
  const [value, setValue] = React.useState<string[]>(['child1-1']);

  const onChange = (newValue: string[]) => {
    setValue(newValue);
  };

  const suffix = (
    <>
      <span>
        {value.length} / {MAX_COUNT}
      </span>
      <DownOutlined />
    </>
  );

  return (
    <TreeSelect
      treeData={treeData}
      value={value}
      onChange={onChange}
      multiple
      maxCount={MAX_COUNT}
      style={{ width: '100%' }}
      suffixIcon={suffix}
      treeCheckable
      placeholder="Please select"
      showCheckedStrategy={TreeSelect.SHOW_CHILD}
    />
  );
};

export default App;

접두사와 접미사 (Prefix and Suffix)

커스텀 prefix와 suffixIcon을 설정합니다.

import React, { useState } from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { TreeSelect } from 'antd';

const icon = <SmileOutlined />;
const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'my leaf',
          },
          {
            value: 'leaf2',
            title: 'your leaf',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'sss',
            title: <b style={{ color: '#08c' }}>sss</b>,
          },
        ],
      },
    ],
  },
];

const App: React.FC = () => {
  const [value, setValue] = useState<string>();

  const onChange = (newValue: string) => {
    console.log(newValue);
    setValue(newValue);
  };

  return (
    <>
      <TreeSelect
        showSearch
        suffixIcon={icon}
        style={{ width: '100%' }}
        value={value}
        styles={{
          popup: {
            root: { maxHeight: 400, overflow: 'auto' },
          },
        }}
        placeholder="Please select"
        allowClear
        treeDefaultExpandAll
        onChange={onChange}
        treeData={treeData}
      />
      <br />
      <br />
      <TreeSelect
        showSearch
        prefix="Prefix"
        style={{ width: '100%' }}
        value={value}
        styles={{
          popup: {
            root: { maxHeight: 400, overflow: 'auto' },
          },
        }}
        placeholder="Please select"
        allowClear
        treeDefaultExpandAll
        onChange={onChange}
        treeData={treeData}
      />
    </>
  );
};

export default App;

커스텀 시맨틱 DOM 스타일링 (Custom semantic dom styling)

classNames와 styles에 객체 또는 함수를 넘겨서 TreeSelect의 시맨틱 DOM 스타일을 커스터마이즈할 수 있습니다.

import React from 'react';
import { Flex, TreeSelect } from 'antd';
import type { GetProp, TreeSelectProps } from 'antd';
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => ({
  root: {
    width: 300,
    borderRadius: token.borderRadius,
  },
}));

const styleObject: TreeSelectProps['styles'] = {
  input: {
    fontSize: 16,
  },
  suffix: {
    color: '#1890ff',
  },
  popup: {
    root: {
      border: '1px solid #1890ff',
    },
  },
};

const styleFunction: TreeSelectProps['styles'] = (
  info,
): GetProp<TreeSelectProps, 'styles', 'Return'> => {
  if (info.props.size === 'medium') {
    return {
      suffix: {
        color: '#722ed1',
      },
      popup: {
        item: {
          color: '#722ed1',
        },
      },
    };
  }
  return {};
};

const treeData: TreeSelectProps['treeData'] = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'leaf1',
          },
          {
            value: 'leaf2',
            title: 'leaf2',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'leaf3',
            title: 'leaf3',
          },
        ],
      },
    ],
  },
];

const App: React.FC = () => {
  const { styles: classNames } = useStyles();

  const sharedProps: TreeSelectProps = {
    treeData,
    classNames,
  };

  return (
    <Flex vertical gap="large">
      <TreeSelect {...sharedProps} styles={styleObject} placeholder="Object" />
      <TreeSelect {...sharedProps} styles={styleFunction} placeholder="Function" size="medium" />
    </Flex>
  );
};

export default App;

API

Common props ref：Common props

Tree props

Property	Description	Type	Default	Version	Global Config
allowClear	Customize clear icon	boolean | { clearIcon?: ReactNode }	false	5.8.0: Support object type	×
autoClearSearchValue	If auto clear search input value when multiple select is selected/deselected	boolean	true		×
bordered	Whether has border style, please use variant instead	boolean	true	-	×
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>	-		5.25.0
defaultOpen	Initial open state of dropdown	boolean	-		×
defaultValue	To set the initial selected treeNode(s)	string | string[]	-		×
disabled	Disabled or not	boolean	false		×
dropdownClassName	The className of dropdown menu, please use classNames.popup.root instead	string	-	-	×
dropdownMatchSelectWidth	Determine whether the popup menu and the select input are the same width, please use popupMatchSelectWidth instead	boolean | number	true	-	×
popupClassName	The className of dropdown menu, use classNames.popup.root instead	string	-	4.23.0	×
popupMatchSelectWidth	Determine whether the popup menu and the select input are the same width. Default set min-width same as input. Will ignore when value less than select width. false will disable virtual scroll	boolean | number	true	5.5.0	×
dropdownRender	Customize dropdown content, use popupRender instead	(originNode: ReactElement) => ReactNode	-		×
popupRender	Customize dropdown content	(originNode: ReactElement) => ReactNode	-		×
dropdownStyle	To set the style of the dropdown menu, use styles.popup.root instead	CSSProperties	-		×
fieldNames	Customize node label, value, children field name	object	{ label: label, value: value, children: children }	4.17.0	×
filterTreeNode	Whether to filter treeNodes by input value. The value of treeNodeFilterProp is used for filtering by default	boolean | function(inputValue: string, treeNode: TreeNode) (should return boolean)	function		×
getPopupContainer	To set the container of the dropdown menu. The default is to create a div element in body, you can reset it to the scrolling area and make a relative reposition. example	function(triggerNode)	() => document.body		×
labelInValue	Whether to embed label in value, turn the format of value from string to {value: string, label: ReactNode, halfChecked: boolean (Is the option list in a semi selected state and not displayed in the values)}	boolean	false		×
listHeight	Config popup height	number	256		×
loadData	Load data asynchronously. Will not load when filtering. Check FAQ for more info	function(node)	-		×
maxCount	The maximum number of items that can be selected. Only takes effect when multiple=true. If (showCheckedStrategy = 'SHOW_ALL' and treeCheckStrictly is disabled) or showCheckedStrategy = 'SHOW_PARENT' is used, maxCount will not take effect.	number	-	5.23.0	×
maxTagCount	Max tag count to show. responsive will cost render performance	number | responsive	-	responsive: 4.10	×
maxTagPlaceholder	Placeholder for not showing tags	ReactNode | function(omittedValues)	-		×
maxTagTextLength	Max tag text length to show	number	-		×
multiple	Support multiple or not, will be true when enable treeCheckable	boolean	false		×
notFoundContent	Specify content to show when no result matches	ReactNode	No data		×
open	Controlled open state of dropdown	boolean	-		×
placeholder	Placeholder of the select input	string	-		×
placement	The position where the selection box pops up	bottomLeft bottomRight topLeft topRight	bottomLeft		×
prefix	The custom prefix	ReactNode	-	5.22.0	×
searchValue	Work with onSearch to make search value controlled	string	-		×
showArrow	Whether to show the arrow icon, please use suffixIcon={null} instead	boolean	true	-	×
showCheckedStrategy	The way show selected item in box when treeCheckable set. Default: just show child nodes. TreeSelect.SHOW_ALL: show all checked treeNodes (include parent treeNode). TreeSelect.SHOW_PARENT: show checked treeNodes (just show parent treeNode)	TreeSelect.SHOW_ALL | TreeSelect.SHOW_PARENT | TreeSelect.SHOW_CHILD	TreeSelect.SHOW_CHILD		×
showSearch	Support search or not	boolean | Object	single: false | multiple: true		×
size	To set the size of the select input	large | medium | small	-		×
status	Set validation status	'error' | 'warning'	-	4.19.0	×
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>	-		5.25.0
suffixIcon	The custom suffix icon	ReactNode	<DownOutlined />		×
switcherIcon	Customize collapse/expand icon of tree node	ReactNode | ((props: AntTreeNodeProps) => ReactNode)	-	renderProps: 4.20.0	5.28.0
tagRender	Customize tag render when multiple	(props) => ReactNode	-		×
treeCheckable	Whether to show checkbox on the treeNodes	boolean	false		×
treeCheckStrictly	Whether to check nodes precisely (in the checkable mode), means parent and child nodes are not associated, and it will make labelInValue be true	boolean	false		×
treeData	Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value)	array<{ value, title, children, [disabled, disableCheckbox, selectable, checkable] }>	[]		×
treeDataSimpleMode	Enable simple mode of treeData. Changes the treeData schema to: [{id:1, pId:0, value:'1', title:"test1",...},...] where pId is parent node's id). It is possible to replace the default id and pId keys by providing object to treeDataSimpleMode	boolean | object<{ id: string, pId: string, rootPId: string }>	false		×
treeDefaultExpandAll	Whether to expand all treeNodes by default	boolean	false		×
treeDefaultExpandedKeys	Default expanded treeNodes	string[]	-		×
treeExpandAction	Tree title open logic when click, optional: false | click | doubleClick	string | boolean	false	4.21.0	×
treeExpandedKeys	Set expanded keys	string[]	-		×
treeIcon	Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true	boolean	false		×
treeLine	Show the line. Ref Tree - showLine	boolean | object	false	4.17.0	×
treeLoadedKeys	(Controlled) Set loaded tree nodes, work with loadData only	string[]	[]		×
treeNodeFilterProp	Will be used for filtering if filterTreeNode returns true	string	value		×
treeNodeLabelProp	Will render as content of select	string	title		×
treeTitleRender	Customize tree node title render	(nodeData) => ReactNode	-	5.12.0	×
value	To set the current selected treeNode(s)	string | string[]	-		×
variant	Variants of selector	outlined | borderless | filled | underlined	outlined	5.13.0 | underlined: 5.24.0	5.19.0
virtual	Disable virtual scroll when set to false	boolean	true	4.1.0	×
onChange	A callback function, can be executed when selected treeNodes or input value change	function(value, label, extra)	-		×
onClear	Called when clear	() => void	-	-	×
onDropdownVisibleChange	Called when dropdown open, use onOpenChange instead	function(open)	-		×
onOpenChange	Called when dropdown open	(open: boolean) => void	-		×
onPopupScroll	Called when dropdown scrolls	(event: UIEvent) => void	-	5.17.0	×
onSearch	A callback function, can be executed when the search input changes	function(value: string)	-		×
onSelect	A callback function, can be executed when you select a treeNode	function(value, node, extra)	-		×
onTreeExpand	A callback function, can be executed when treeNode expanded	function(expandedKeys)	-		×

showSearch

Property	Description	Type	Default	Version
autoClearSearchValue	If auto clear search input value when multiple select is selected/deselected	boolean	true
filterTreeNode	Whether to filter treeNodes by input value. The value of treeNodeFilterProp is used for filtering by default	boolean | function(inputValue: string, treeNode: TreeNode) (should return boolean)	function
searchValue	Work with onSearch to make search value controlled	string	-
treeNodeFilterProp	Will be used for filtering if filterTreeNode returns true	string	value
onSearch	A callback function, can be executed when the search input changes	function(value: string)	-

Tree 메서드 (Tree Methods)

Name	Description	Version
blur()	Remove focus
focus()	Get focus

TreeNode props

수동 구성의 번거로움을 피하기 위해 TreeNode보다 treeData의 사용을 권장합니다.

Property	Description	Type	Default	Version
checkable	When Tree is checkable, set TreeNode display Checkbox or not	boolean	-
disableCheckbox	Disables the checkbox of the treeNode	boolean	false
disabled	Disabled or not	boolean	false
isLeaf	Leaf node or not	boolean	false
key	Required property (unless using treeDataSimpleMode), should be unique in the tree	string	-
selectable	Whether can be selected	boolean	true
title	Content showed on the treeNodes	ReactNode	---
value	Will be treated as treeNodeFilterProp by default, should be unique in the tree	string	-

시맨틱 DOM (Semantic DOM)

https://ant.design/components/tree-select/semantic.md

디자인 토큰 (Design Token)

컴포넌트 토큰 (Component Token - TreeSelect)

Token Name	Description	Type	Default Value
indentSize	Indent width of tree	number	24
nodeHoverBg	Background color of hovered node	string	rgba(0,0,0,0.04)
nodeHoverColor	Text color of hovered node	string	rgba(0,0,0,0.88)
nodeSelectedBg	Background color of selected node	string	#e6f4ff
nodeSelectedColor	Text color of selected node	string	rgba(0,0,0,0.88)
switcherSize	Switcher width of tree	number	24
titleHeight	Node title height	number	24

글로벌 토큰 (Global Token)

Token Name	Description	Type	Default Value
borderRadius	Border radius of base components	number
borderRadiusSM	SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size	number
colorBgContainer	Container background color, e.g: default button, input box, etc. Be sure not to confuse this with colorBgElevated.	string
colorBgContainerDisabled	Control the background color of container in disabled state.	string
colorBgElevated	Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than colorBgContainer. E.g: modal, pop-up, menu, etc.	string
colorBgTextHover	Control the background color of text in hover state.	string
colorBorder	Default border color, used to separate different elements, such as: form separator, card separator, etc.	string
colorFillQuaternary	The weakest level of fill color is suitable for color blocks that are not easy to attract attention, such as zebra stripes, color blocks that distinguish boundaries, etc.	string
colorPrimary	Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.	string
colorPrimaryBorder	The stroke color under the main color gradient, used on the stroke of components such as Slider.	string
colorPrimaryHover	Hover state under the main color gradient.	string
colorSplit	Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.	string
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string
colorTextDisabled	Control the color of text in disabled state.	string
colorTextQuaternary	The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc.	string
colorWhite	Pure white color don't changed by theme	string
controlInteractiveSize	Control the interactive size of control component.	number
controlItemBgActiveDisabled	Control the background color of control component item when active and disabled.	string
controlItemBgHover	Control the background color of control component item when hovering.	string
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number
fontSizeLG	Large font size	number
fontWeightStrong	Control the font weight of heading components (such as h1, h2, h3) or selected item.	number
lineHeight	Line height of text.	number
lineType	Border style of base components	string
lineWidth	Border width of base components	number
lineWidthBold	The default line width of the outline class components, such as Button, Input, Select, etc.	number
lineWidthFocus	Control the width of the line when the component is in focus state.	number
marginXS	Control the margin of an element, with a small size.	number
motionDurationFast	Motion speed, fast speed. Used for small element animation interaction.	string
motionDurationMid	Motion speed, medium speed. Used for medium element animation interaction.	string
motionDurationSlow	Motion speed, slow speed. Used for large element animation interaction.	string
motionEaseInBack	Preset motion curve.	string
motionEaseOutBack	Preset motion curve.	string
paddingXS	Control the extra small padding of the element.	number

FAQ

onChange에서 부모 노드를 얻는 방법이 궁금합니다. {#faq-parent-node-info}

성능 고려로 이 기능을 제공하지 않습니다. 다음 방법으로 구할 수 있습니다: https://codesandbox.io/s/get-parent-node-in-onchange-eb1608

커스텀 Option이 스크롤 깨짐을 일으키는 이유는 무엇인가요? {#faq-custom-option-scroll}

Select의 FAQ를 참고하세요.

검색할 때 loadData가 트리거되지 않는 이유는 무엇인가요? {#faq-load-data-expand}

이전 버전에서는 검색할 때 loadData가 트리거되었습니다. 하지만 입력할 때 네트워크를 막는다는 피드백을 받았습니다. 그래서 검색할 때 loadData를 트리거하지 않도록 변경했습니다. 하지만 filterTreeNode로 비동기 로직을 여전히 처리할 수 있습니다:

<TreeSelect
  filterTreeNode={(input, treeNode) => {
    const match = YOUR_LOGIC_HERE;

    if (match && !treeNode.isLeaf && !treeNode.children) {
      // Do some loading logic
    }

    return match;
  }}
/>

팝업이 가로로 스크롤되지 않는 이유는 무엇인가요? {#faq-popup-not-scroll}

가상 스크롤을 끄면 됩니다. 가상 스크롤이 켜져 있으면 전체 리스트의 scrollWidth를 정확히 측정할 수 없기 때문입니다.

더 알아보기 (Learn more)

• 스타터 가이드: 트리 셀렉트 문서 보기
• Ant Design 컴포넌트 개요
• ConfigProvider로 컴포넌트 설정하기