Cascader
This component lets you view and select data from a cascading, nested structure in a dropdown list. Unlike a tree-select component, it allows you to complete the selection within a single layer. This topic describes how to configure the component.
Example
For example, you can use the Cascader component to select one or more provinces, cities, or districts.
The component provides two selection modes: multi-selection on hover and single-selection on click.Step 1: Add the component
Create a web application. For more information, see Create a web application.
In the Web application editor, click the component icon
on the left.- Above the component list on the left of the canvas, enter Cascader to find the component. Then, drag the component to the canvas.
For more information about adding components, see Add a component.
After you add the component, it appears on the canvas, and the Style panel on the right automatically displays its default settings.
Step 2: Configure the data source
- In the right-side pane of the web application editor, on the Style tab, click Data Source and then Configure Data Source.
- On the Data Source Configuration page, select a data source type and complete the configuration.
- Click OK.
Step 3: Configure the style
- In the Style panel on the right, configure the display settings for the component.
Parameter Description Cascader Configuration Set the default placeholder text, specify whether to show a border, enable search input and multi-selection, and define how child nodes are displayed. - When the Allow multiple selection checkbox is cleared, you can configure whether to display the Show clear button.
- Selecting the Allow multiple selection checkbox displays and selects the Allow selecting parent nodes option by default, and hides the Show clear button option. At runtime, each selected item includes a delete button.
Cascader Style Set the colors for the component's background, border, buttons, and input font. Adjust the position of the component on the page. For more information about common component style configurations, see Style configuration.
Step 4: Configure interactions
- Select the Interaction tab for the component to configure events and actions. For details, see Interaction Settings.
This component supports only the Value Change event. The component's value is a one-dimensional array containing the value
["2","4","7"]of each selected item, for example, . Click Preview in the upper-right corner of the page to preview and test the component's data and style.