DocsICP FilingConsole
官方文档
首页

Tree select

更新时间：
复制 MD 格式
我的收藏

The tree select component lets you view and select hierarchical data from a drop-down list. Compared to a standard select component, it supports multiple data levels and includes a search function. For example, you can use it to select from an organizational hierarchy, a subject classification system, or a category directory. This topic describes how to configure the component.

Example

You can select one or more items from the tree list.

By default, the component appears as a drop-down select box with a Please select placeholder and a drop-down arrow icon.

Step 1: Add the component

  1. Create a web application. For more information, see Create a web application.

  2. In the Web application editor, click the component icon 组件 on the left.

  3. In the search box above the component list on the left, enter tree select, find the component, and drag it onto the canvas.

    For more information about adding components, see Add a component.

    After you add the component, the tree select component appears in the center of the canvas, and its configuration items and style settings appear in the right-side panel.

Step 2: Configure the data source

  1. In the right-side pane of the web application editor, on the Style tab, click Data Source and then Configure Data Source.
  2. On the Data Source Configuration page, select a data source type and complete the configuration.
    The available data source types are API, Static Data, and Application Push.
  3. Click OK.

Step 3: Configure styles

  1. On the Style tab in the right-side panel, configure the display settings for the component.
    Parameter Description
    Tree select configuration Configure the default placeholder, border visibility, search input, multiple selection, and whether to expand all nodes.
    • Clearing the Allow multiple selections check box enables the Show clear button option.
    • Selecting the Allow multiple selections check box displays and selects the Allow selecting parent nodes option, and hides the Show clear button option. At runtime, each selected data item has its own delete button.
    Tree select style
    Set the colors for the component's background, border, button, and input font.

  2. Adjust the position of the component on the page. For more information about common component style configurations, see Style configuration.

Step 4: Configure interactive actions

  1. Select the Interaction tab to configure events and actions. For more information, see Interaction configuration.
    This component supports only the Onchange event. The component's value is a one-dimensional array of the value of each selected item in the selection box, such as ["2","4","7"].

  2. Click Preview in the upper-right corner of the page to preview and test the component's data and style.

Previous：CascaderNext：Transfer