- 级联选择（Cascader）
🧬 集合组件
级联选择（Cascader）
Contribute什么是级联选择器（Cascader）
级联选择器是一种输入组件类型，它允许用户从下拉菜单中选择等级数据，例如类别或子类别。 当用户从下拉菜单选择一个选项时， 下划线器将自动更新以在嵌套下拉菜单中显示相关的子类别或选项。
例如，如果您有用于选择产品类别的客户端输入组件。 第一个下拉菜单可以显示所有可用的分类，例如“Electronics”、“Clothing”和“Books.”。 当用户选择”Electronics”时，级联选择器会更新以显示电子产品的子类别，如”Phones”、“Laptops”和”表格”。 这使用户能够快速和轻松地浏览层次结构数据并选择他们所需要的选项。
属性
Cascader可用的属性。 Cascader可用的属性。 JavaScript 可以被写入阅读或更改组件信息。
| 属性 | 描述 |
|---|---|
| 数据源 | 每个选项必须是 JSON 格式，包含两个键，值和标签。 通过使用数组，您可以在同一级创建选项。 子选项可以通过使用 “子” 属性来创建。 通过使用数组，您可以在同一级创建选项。 子选项可以通过使用 “子” 属性来创建。 |
| 默认值 | 组件的初始值。 组件的初始值。 组件的初始值。 组件的初始值。 组件的初始值。 组件的初始值。 您可以在 {{}} 中输入JavaScript 动态更改初始值。 |
| 占位符 | 当输入字段为空时，值将显示。 |
| 标签 | 显示给用户的字段名称 |
| 标题 | 详细描述字段的标题 |
| 隐藏标签 | 设置是否显示标签 |
| 位置 | 设置标签相对于组件的位置 |
| 对齐 | 设置标签的对齐(对齐到左或右) |
| 宽度 | 当标签位于组件左侧时，设置标签的宽度。 |
| 事件处理程序 | 响应组件事件触发查询、控制组件或调用其他API。 |
| 已禁用 | 控制组件是否为只读状态. 一个只读组件可以被选择和集中，但不能被修改。 |
| 只读 | 控制组件是否为只读状态. 一个只读组件可以被选择和集中，但不能被修改。 |
| 显示清除按钮 | 控制是否在输入字段中显示清除按钮 |
| 扩展方法 | 设置连线拓展方式(点击或悬停) |
| 工具提示 | 用户可以在此输入组件工具提示。 工具提示将在其焦点时显示。 支持Markdown 格式。 |
| Hidden | 动态控制组件是否隐藏。 您可以通过动态布尔值更改隐藏状态。 您可以通过动态布尔值更改隐藏状态。 您可以通过动态布尔值更改隐藏状态。 您可以通过动态布尔值更改隐藏状态。 您可以通过动态布尔值更改隐藏状态。 |
方法
您可以使用其他组件来控制组件。 我们支持以下两种方法： 我们支持以下两种方法： 我们支持以下两种方法： 我们支持以下两种方法： 我们支持以下两种方法： 我们支持以下两种方法：
- setValue
要设置选中的选项，例如{{“value1”}}
| 属性 | 描述 |
|---|---|
| 值 | Input value |
- clearValue
清除选中组件的值
示例用法：
Cascader 组件支持使用内置事件系统监听其他组件的onChange事件。 通过跟随这些示例步骤设置它： 通过跟随这些示例步骤设置它： 通过跟随这些示例步骤设置它： 通过跟随这些示例步骤设置它： 通过跟随这些示例步骤设置它： 通过跟随这些示例步骤设置它：
- 将事件触发器添加到您想要听到的组件中。 例如，如果你想要聆听无线电组组件的 onChange` 事件的话。 您将向单选组的组件添加事件触发器。 例如，如果你想要聆听无线电组组件的 onChange` 事件的话。 您将向单选组的组件添加事件触发器。
- 在编辑事件处理器中，选择 `Control component 在动作中，选择你想要更新的
级联选择组件作为事件的目标。 - 选择
SetValue动作并选择级联选择组件的适当值。 这将是Cascader 组件被选中项的值，并将在事件触发时更新。 - 保存事件触发器设置并且如果您想要监听其他任何组件的过程，都可以重复创建
一旦您设置了事件触发器，级联选择输入组件将在其他组件上触发onChange` 事件时自动更新。 这允许您创建实时响应用户输入的动态接口 让用户更容易浏览和与您的应用程序交互。
事件处理器
| 事件 | 描述 |
|---|---|
| 更改 | 当用户更改选中的选项值 |
| 聚焦 | 当用户在级联选择器上移动鼠标光标 |
| 失焦 | 当用户完成选择选项并退出对级联选择组件的聚焦 |
数据
组件有一些常用的数据，可以通过应用程序中的 {{componentName.propertyName}} 调用。
| 属性名称 | 描述 |
|---|---|
| 数据源模式 | 线索中数据源的模式 (默认动态) |
| 显示名称 | 此组件的名称 (ie cascader1) |
| 触发器 | 触发事件(点击) |
| 值 | 选定的值 |
| 标签 | 标签值 |
| 标签对齐 | 级联选择标签的对齐(左或右) |
| 标签位置 | 标签的位置(左或右) |
| 标签宽度 | 代表标签宽度的整数 |
| 占位符 | 占位符的值 |
例如：{{cascader1.value[0]}}
使用大小写
接下来，我们将展示如何动态绘制数据源的数据至备选方案。
步骤 1 添加动作
让我们在Supabase创建一个叫做project 的表格，以及一个叫做therapist 的子表格，它与project_id 对齐。
然后我们可以从行动列表中为 Supabase创建一个新的动作，列出项目中的所有数据并命名supabasedb1
SELECT [project.id](http://project.id/) as project_id, [therapist.name](http://therapist.name/) as therapist_name from therapist join project on therapist.project_id = [project.id](http://project.id/)步骤 2 变换数据
接下来，我们可以`启用transformer 部分在选择部分下。 接下来，我们可以`启用transformer 部分在选择部分下。 接下来，我们可以**`启用**transformer** 部分在选择部分下。 在文本领域，我们只能从数据中捕获我们需要的值和标签，并使用JavaScript将它们变成有利于案例的选项。
const transformedArray = data.reduce((acc, current) => {
const existing = acc.find((item) => item.value === current.project_id);
if (existing) {
const therapist = { value: current.therapist_id, label: current.therapist_name };
existing.children.push(therapist);
} else {
const project = { value: current.project_id, label: current.project_name, children: [] };
const therapist = { value: current.therapist_id, label: current.therapist_name };
project.children.push(therapist);
acc.push(project);
}
return acc;
}, []);
return transformedArray;最后操作应该显示如下
点击 `保存 和 `运行 激活此操作。
步骤 3 配置组件
将连铸组件拖放到画布后，我们可以单击配置其数据源到{{supabasedb1.data}}
选填项: 我们将 {{['a', '1']}} 作为默认值，用于指定默认选中项{{['Psychotherapy'], ['James']}}
