TreeSelect

Can choose tree structure data.Only Single choice is supports.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

• Basic: Basic usage example.
• Value Format: When labelInValue is true, the format of value is: { label: string, value: string }.
• custom render: Under single selection, the rendering display can be customized through renderFormat
• Front label: Specify addBefore to add elements before the select box. (2.41.0)
• Form TreeData: Generate a tree structure by treeData.
• Controlled: Controlled mode.
• Dynamic Loading: Load nodes dynamically via loadMore. At this time, isLeaf can be set to indicate leaf nodes.
• Search: Set showSearch=true to enable the search function. You can only search in the loaded data during dynamic loading. The default keyword search is to match from the value field. You can also pass in filterTreeNode to customize the filtering method.
• Remote search: Custom search can be enabled when the passed onSearch is a function, and data can be loaded remotely.
• Size: Four sizes (small, default, large, huge) can be selected through size. The height corresponds to 24px, 32px, 36px, 40px.
• Customize Trigger: Set triggerElement to customize the display.
• Multiple Selection: Multiple Selection
• Checkable: The treeCheckable property can display checkbox.
• Check Strategy: Customize the return value through the treeCheckStrategy property.
• Customize Dropdown: Use dropdownRender to freely expand the drop-down menu.
• Control Collapse: The dropdown expanded by default. Use popupVisible and onVisibleChange to control the expansion and collapse of the dropdown. For example, in this demo, onVisibleChange is triggered when the mouse moves out of the dropdown and the popup, the parameter is false, and the dropdown box is collapsed. For details on triggering onVisibleChange, please refer to Trigger
• Customize treeData: You can customize treeData by fieldNames.
• Virtual List: By specifying treeProps.virtualListProps to turn on the virtual list, high performance can be obtained when a large amount of data is used.
• Draggable: In multiple mode, specify the dragToSort property to allow sort the entered values by dragging.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

TreeSelect

LabelValue

export type LabelValue = {
  label: ReactNode;
  value: string;
  disabled?: boolean;
};

FieldNamesType

export type FieldNamesType = {
  key?: string;
  title?: string;
  disabled?: string;
  children?: string;
  isLeaf?: string;
  disableCheckbox?: string;
  checkable?: string;
};

TreeSelectDataType

export type TreeSelectDataType = TreeDataType & {
  value?: string;
};

TreeDataType

export type TreeDataType = NodeProps & {
  key?: string;
  _index?: number;
  children?: TreeDataType[];
  [key: string]: any;
};

InputValueChangeReason

// 造成输入框值改变的原因：用户输入、选中选项、选项下拉框收起
export type InputValueChangeReason =
  | "manual"
  | "optionChecked"
  | "optionListHide";

ObjectValueType

export type ObjectValueType = {
  value?: any;
  label?: ReactNode;
  closable?: boolean;
};