codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/20.PC/347/253/257Vue2/347/273/204/344/273/266/350/257/264/346/230/216/357/274/210/351/273/230/350/256/244/357/274/211/70./351/200/211/346/213/251/345/231/250/173./351/200/211/346/213/251/345/231/250.md

@@ -0,0 +1,709 @@
+# 选择器
+
+下拉选项选择，支持单选、多选、筛选等功能。选择器组件常用于可选择的场景，例如表单和数据筛选等。
+
+例如：在表单场景中，为商品选择分类。
+
+<img src="../assets/xuanzeqi_202409291358_1.png" class="imgStyle" style="width:600px;" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1.  选择器的各类属性、事件、可访问属性等基础信息。
+2.  如何使用选择器的各类属性，具体实现效果包括但不限于
+
+    - 使用选择器的“数据源”属性，以设置选择器中展示的选项数据内容；
+    - 使用选择器的“分页”“默认分页条数”等属性，以设置选择器选项数量较多时分页展示；
+    - 使用选择器的“筛选”属性，以设置选择器选项支持搜索；
+    - 使用选择器的“可扩展下拉”属性，以实现直接在选择器中添加新选项；
+    - 使用选择器的“转换器”属性，以设置“选中值”的格式；
+    - 使用选择器的“可选中”“可多选展示形式”属性，以设置选择项是否支持多选和多选的展示格式；
+
+3.  使用“选择项”，完善“值”、“选项文本”等属性，以添加不包含在数据源内的选项。
+4.  如何使用选择器的各类组件逻辑，具体实现效果包括但不限于
+
+    - 使用组件逻辑“open“”close“或”toggle“，以设置选择器下拉框的弹出状态；
+    - 使用组件逻辑”reload“，以实现重新加载选择器；
+
+5.  使用说明：如何快速生成一个选择器。
+6.  示例：如何获取选择器的选中值。
+
+
+
+</div>
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 选择器
+
+<img src="../assets/xuanzeqi_202411121745_1.png" class="imgStyle" style="" />
+
+<img src="../assets/xuanzeqi_202411121745_2.png" class="imgStyle" style="" />
+
+支持通过添加选项的方式形成一个固定选项数量的选择器，在选项中可直接设置每个选项的值和选项展示的文本。
+
+#### 数据属性
+
+- 数据源：组件所使用的数据的来源 。除了直接添加选择项的方式外，选择器可以通过绑定数据源的方式实现渲染选择器的效果。数据源可绑定`List<T>`类型变量，或输出参数为数组或包含`List<T>`的匿名数据结构的逻辑。逻辑包含前端逻辑和服务端逻辑，`List<T>`中T的类型可以是任意类型（包括List、联合类型）。例如绑定输出结果为{list\:List<{student\:Student}>,total:10}的服务端逻辑。
+
+  <div class="highlight">
+
+  当选择器绑定数据源后，应用自动生成current变量。选择器会根据数据源中包含的 List 按顺序对每一项进行循环遍历，使用current即可指代在 List 中当前正在访问或操作的对象。为**选择项**或其中的组件编辑表达式或添加事件，即可调用current变量：
+
+  <img src="../assets/biaoge_202412060952_1.png" class="imgStyle" style="width:200px" />
+
+  **所有可绑定数据源的组件同理**。
+
+  在选择器的属性中设置任意字段（如文本字段）时，同样根据字段值进行循环遍历，但不显示其 current.item 前缀。
+
+
+  </div>
+
+    操作步骤：
+
+    1. 点击输入框进入编辑表达式页面，拖入变量或使用调用逻辑组件，可使用组件的可访问属性。
+
+        <img src="../assets/xuanzeqi_202411121745_5.png" class="imgStyle" style="" />
+
+    2. 选择值字段、文本字段，或通过动态选项插槽替代文本字段来实现动态获取数据并展示选项。
+
+        <img src="../assets/xuanzeqi_202411121745_6.png" class="imgStyle" style="" />
+
+- 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+- 选中值：当前选中的值，若选项通过绑定数据源生成，其数据类型与值字段的类型相关；若选项通过手动添加选项生成，其数据类型与选择项的“值”属性有关。当组件为多选时，该值为List类型；当多选后使用转换器时，该值为String类型。“选中值”默认开启编辑表达式功能，编辑表达式时若直接绑定变量，支持开启“是否将组件输入赋值给变量“，开启时会根据选择的选项的“值字段”属性对应值或选择项的“值”属性改变变量的值，也会根据变量的值展示当前选择的选项。编辑表达式时若包含其他表达式，则仅支持根据表达式展示当前选择的选项，建议搭配“只读”属性使用。
+
+    <img src="../assets/xuanzeqi_202411121745_7.png" class="imgStyle" style="" />
+
+- 文本字段：绑定数据源后，下拉框中展示的文本。当设置数据源时，可点击选择数据类型中的属性作为文本字段；当数据源的数据类型为基础类型时，默认为item且不可修改。
+
+
+- 动态选项插槽：若开启“动态选项插槽“，下拉框的内容区域包含插槽。选择器在绑定数据源的前提下该属性生效，插槽中的组件支持根据选择器的数据源来配置信息并动态加载。若下拉框选项中仅需要将数据源中的某一属性作为文本展示，则可以直接配置“文本字段”，无需开启“动态选项插槽”。
+
+    - 例如：向插槽中拖拽标签组件并为标签组件的“文本”属性绑定变量current.item或其属性，制品应用中即可根据数据源动态渲染下拉选项中的标签。
+
+      <img src="../assets/xuanzeqi_202412031055_1.png" class="imgStyle" style="" />
+
+    - 参考制品效果：
+
+      <img src="../assets/xuanzeqi_202412031055_2.png" class="imgStyle" style="" />
+
+- 值字段：绑定数据源后，在下拉框中选中某个数据后获取的值。当设置数据源时，可点击选择数据类型中的属性作为值字段；当数据源的数据类型为基础类型时，默认为item且不可修改。
+- 分页：设置是否分页展示数据，即当前页数据加载触底后展示下一页数据。默认关闭。
+- 默认分页条数：选择每页中展示多少条数据，最小展示数量为10条，默认展示数据为50条。开启“分页”属性时生效。
+
+    - 当“数据源”为前端数据，即数据不经过服务端逻辑处理，开启“分页”属性并配置“默认分页条数”即可实现分页功能。
+    - 当"数据源“需要调用服务端逻辑时，若开启“分页”，组件可以获取到分页的大小和当前的页数，将属性传递到服务端逻辑并在查询的数据中完成分页规则配置即可实现分页，参考操作步骤如下：
+
+      1. 为需要调用的查询数据的服务端逻辑添加两个Integer类型输入参数page和size。
+
+         <img src="../assets/xuanzeqi_202409291358_8.png" class="imgStyle" style="" />
+
+      2. 将数据查询包裹在分页组件内，页数为输入参数page、每页记录数为输入参数size。
+
+         <img src="../assets/xuanzeqi_202409291358_9.png" class="imgStyle" style="" />
+
+      3. 返回选择器组件的数据源，将当前组件的size和page属性作为输入参数传入服务端逻辑。
+
+         <img src="../assets/xuanzeqi_202409291358_10.png" class="imgStyle" style="" />
+
+- 初始化排序规则：设置初始化排序的字段和排序规则，当数据源设置为动态数据源时，可点击选择数据类型中的属性作为排序规则，排序规则默认值升序。
+- 选项辅助文本：绑定数据源后，选项的辅助说明信息，展示在选项下，默认关闭。
+- 辅助文本字段：开启选项辅助文本后，用于显示在选项下的辅助描述选项的字段，当数据源设置为动态数据源时，可点击选择数据类型中的属性作为辅助文本。
+
+  <img src="../assets/xuanzeqi_202409291358_11.png" class="imgStyle" style="" />
+
+- 图标展示字段：用于显示在文本前面的图标，当数据源设置为动态数据源时，可点击选择数据类型中的属性作为展示图标的字段。
+- 自动加载选中值：若选择器的选中项不在初始加载的数据当中，自动加载后续数据直至找到选中项并展示在下拉框中。
+- 选中值完整数据：若选择器的选中项不在初始加载的数据当中，并且为了避免数据量极大的情况下使用“自动加载选中值”增加资源消耗，手动填写选中项并回显到选择框中。数据类型为 `List<text:选项文本,value:选项值>` 。
+
+  <div class="highlight">
+
+  开启“选中值完整数据”属性时需要关闭“自动加载选中值”属性。
+
+  </div>
+
+- 筛选：开启后选择器可输入文本根据“文本字段”进行筛选，默认关闭。
+
+    - 当“数据源”为前端数据，即数据不经过服务端逻辑处理，开启“筛选”属性即可实现筛选功能。
+
+    - 当"数据源“需要调用服务端逻辑时，需要将页面组件的过滤文本属性传递到服务端逻辑并在查询的数据中完成筛选配置，参考操作步骤如下：
+
+      1. 进入选择器组件数据源绑定的服务端逻辑，为服务端逻辑添加String类型输入参数filterText。
+
+         <img src="../assets/xuanzeqi_202409291358_12.png" class="imgStyle" style="" />
+
+      2. 双击编辑数据查询，进入筛选条件界面，将输入参数作为筛选条件。使用的数据筛选组件建议与选择器组件的“匹配方式“属性保持一致；筛选的实体属性建议与选择器组件的“文本字段”属性保持一致。
+
+         <img src="../assets/xuanzeqi_202409291358_13.png" class="imgStyle" style="" />
+
+      3. 返回选择器组件的数据源，将当前组件的filterText属性作为输入参数传入服务端逻辑。
+
+         <img src="../assets/xuanzeqi_202409291358_14.png" class="imgStyle" style="" />
+
+- 匹配方法：开启筛选后，支持筛选过滤时的匹配方法，支持包括、匹配开头和匹配结尾共三种模式。开启“筛选”属性时生效。适用于数据源进行前端筛选的情况。
+
+#### 主要属性
+
+- 可扩展下拉项：设置是否开启可扩展下拉项，开启后可自定义添加下拉框选项，点击添加后可添加在下拉框内。该属性适用于“文本字段”属性有效的选择器，即选择器添加数据源后有效。
+
+  <img src="../assets/xuanzeqi_202409291358_15.gif" class="imgStyle" style="" />
+
+  <div class="highlight">
+
+  - 当选择器“文本字段”和“值字段”属性为默认值text和value时，若开启“可扩展下拉项”属性，默认生成的局部变量和事件参考如下：
+
+    <img src="../assets/xuanzeqi_202409291358_16.png" class="imgStyle" style="" />
+
+    默认生成的“可扩展下拉项”功能支持获取新增选项的文本，可根据具体需求修改后使用，例如添加value属性用于获取新增选项的选中值。
+
+    <img src="../assets/xuanzeqi_202409291358_17.png" class="imgStyle" style="" />
+
+  - 当选择器“文本字段”根据绑定的数据源修改后，若开启“可扩展下拉项”属性，默认生成局部变量和事件与绑定的数据源的数据类型有关。例如已有前提条件：选择器已绑定数据源，数据类型与实体相关；根据实体设置“文本字段”。
+
+    <img src="../assets/xuanzeqi_202409291358_18.png" class="imgStyle" style="" />
+
+    此时开启“可扩展下拉项”属性后，默认生成的局部变量和事件参考如下：在本示例中，由于事件中调用了实体的create逻辑，新添加的选项能够作为实体信息长期存储在选择器中，可根据具体需求修改后使用。
+
+    <img src="../assets/xuanzeqi_202409291358_19.png" class="imgStyle" style="" />
+
+    <img src="../assets/xuanzeqi_202409291358_20.png" class="imgStyle" style="" />
+
+  > 具体使用场景请参考[如何为选择器动态添加数据](../../../../80.常见场景案例/40.组件场景/30.表单场景/090.如何为选择器动态添加数据.md)。
+
+  </div>
+
+- 全选控制：支持点击全选选项后选中全部选项，默认关闭。开启“可多选”属性时生效。
+
+  <img src="../assets/xuanzeqi_202409291358_21.png" class="imgStyle" style="" />
+
+- 全选展示内容：全选选项展示的文本内容，默认为“全选”。开启“全选控制”属性时生效。
+
+  > 在制品应用中，点击全选选项无法触发选择器的“选择前”和“选择后”事件，如有需要，可使用“改变后”事件。
+
+- 转换器：开启“可多选”属性后，将选中的值转为对应格式。支持以‘,’连接，以‘|’连接，以‘;’连接，json和无共五种模式。
+
+
+
+  - 选择“json”时将选中值转换为json格式文本。
+
+    <img src="../assets/xuanzeqi_202409291358_22.png" class="imgStyle" style="" />
+
+  - 选择“以xx连接“时将选中值转换为以对应符号连接的文本。
+
+    <img src="../assets/xuanzeqi_202409291358_23.png" class="imgStyle" style="" />
+
+  - 选择“无”时选中值为 `List<V>` 类型。
+
+    <img src="../assets/xuanzeqi_202409291358_24.png" class="imgStyle" style="" />
+
+- 占位符：选择器无内容时的提示信息，支持自定义编辑，默认值“请选择”。
+- 自动获取焦点：在进入页面时，是否自动聚焦到该组件，默认关闭。如进入页面时必填选项自动获取焦点。
+- 前缀图标：支持在占位符前添加图标，如搜索图标。支持从图标库选择图标、上传自定义SVG格式图标或编辑表达式。具体使用方法请参考：[图标](../40.展示/061.按钮.md)组件的“图标”属性。
+- 后缀图标：支持在选择器后添加图标，如搜索图标。支持从图标库选择图标、上传自定义SVG格式图标或编辑表达式。具体使用方法请参考：[图标](../40.展示/061.按钮.md)组件的“图标”属性。
+
+  <img src="../assets/xuanzeqi_202409291358_25.png" class="imgStyle" style="" />
+
+- 弹出层位置依据：设置弹出层依据哪个元素定位位置，支持全局body、引入元素下共两种模式。
+
+    - 弹出层位置依据为全局body时：当选择器置于复杂页面布局中，建议设置弹出层位置依据为全局body，例如将选择器置于数据表格中时，防止弹出层被表格行遮挡。
+
+      <img src="../assets/xuanzeqi_202409291358_26.png" class="imgStyle" style="" />
+
+    - 弹出层位置依据为引入元素下时：
+
+      <img src="../assets/xuanzeqi_202409291358_27.png" class="imgStyle" style="" />
+
+#### 交互属性
+
+- 可清除：设置清除按钮一键清除选择的所有内容，默认关闭。
+- 可多选：设置可多选，默认关闭。
+- 可多选展示形式：选择的选项过多时展示的形式，支持过多时省略、过多时收缩、过多时显示共三种模式。
+
+  如下效果：开启可多选，多选展示形式为过多时省略。
+
+  <img src="../assets/xuanzeqi_202409291358_28.png" class="imgStyle" style="" />
+
+#### 状态属性
+
+- 初始即加载：设置初始时立即加载，开启后当数据源绑定逻辑时会调用相对应的逻辑。如逻辑中有输入参数需调用其他逻辑获取，建议关闭初始加载并在入参获取后再调用对应的数据源逻辑。
+- 展示暂无数据文案：设置暂无数据时是否展示暂无数据的文字提示，默认开启。
+- 暂无数据文案：暂无数据时展示的文字提示，默认值暂无数据。
+- 为空自动禁用：选择器中数据源无数据时，置灰展示且禁止任何交互（焦点、点击、选择、输入等），默认关闭。
+- 只读：选择器正常展示，但禁止选择和输入，默认关闭。
+- 禁用：禁止任何交互（焦点、点击、选择、输入等），默认关闭。
+- 预览：内容区域展示预览状态，不支持编辑。通常用作模板样式预览。
+- 弹出状态：选择器的下拉框是否为弹出状态，默认关闭。关闭编辑表达式，可直接手动选择当前选择器的状态；开启编辑表达式绑定为Boolean类型内容，可实现动态的展示效果。
+
+    - 关闭编辑表达式：关闭编辑表达式时直接展示下拉框初始的弹出状态。
+
+        <img src="../assets/xuanzeqi_202411121745_8.gif" class="imgStyle" style="" />
+
+    - 开启编辑表达式：编辑表达式时若直接绑定Boolean类型变量，支持开启“是否将组件输入赋值给变量“，开启时会根据下拉框的状态改变变量的值，也会根据变量的值展示下拉框的状态。编辑表达式时若包含其他表达式，则仅支持根据表达式展示当前下拉框的状态。
+
+        <img src="../assets/xuanzeqi_202411121745_9.png" class="imgStyle" style="" />
+
+
+#### 样式属性
+
+- 宽度：设置选择器宽度大小，支持占满、巨大、大、中型、正常、小、迷你共七种模式。
+- 下拉列表宽度：选择器下拉框的宽度，如300px。
+- 回显选项：选择选项后，选中值的文本内容是否展示在选择器中。默认开启。关闭时效果如下：
+
+  <img src="../assets/xuanzeqi_202409291358_31.png" class="imgStyle" style="" />
+
+- 高度：设置选择器高度大小，支持占满、巨大、大、中型、正常、小、迷你共七种模式。
+
+### 选择项
+
+<img src="../assets/xuanzeqi_202409291358_32.png" class="imgStyle" style="" />
+
+<img src="../assets/xuanzeqi_202409291358_33.png" class="imgStyle" style="" />
+
+#### 数据属性
+
+- 值：选中下拉框中的数据后获取的值。可手动输入内容或编辑表达式。当选择项被选中时，选择器的“选中值”会包含该值。
+
+    - 手动输入：
+
+      <img src="../assets/xuanzeqi_202409291358_34.png" class="imgStyle" style="" />
+
+    - 编辑表达式：编辑表达式时建议绑定基础类型变量。
+
+      <img src="../assets/xuanzeqi_202409291358_35.png" class="imgStyle" style="" />
+
+- 选项辅助文本：选项的辅助说明信息，展示在选项下。
+
+#### 主要属性
+
+- 选项文本：选择后展示在选择框中的文本。删除选择项中的文本组件后有效。
+
+  <img src="../assets/xuanzeqi_202409291358_36.png" class="imgStyle" style="" />
+
+#### 状态属性
+
+- 禁用：禁止任何交互（焦点、点击、选择等），默认关闭。
+
+  <div class="highlight">
+  “禁用”属性控制的是组件本身的状态，不涵盖拖拽放置在选择项中的其他组件，控制其他组件的状态需要设置对应组件的“禁用”属性。
+  </div>
+  
+### 选项分组
+
+<img src="../assets/xuanzeqi_202409291358_37.png" class="imgStyle" style="" />
+
+<img src="../assets/xuanzeqi_202409291358_38.png" class="imgStyle" style="" />
+
+#### 主要属性
+
+- 标题：选择分组的标题，在标题插槽中没有文本组件时生效。
+
+> 选项分组下可以继续添加该分组下的选项。
+
+<img src="../assets/xuanzeqi_202409291358_39.png" class="imgStyle" style="" />
+
+### 分割线
+
+<img src="../assets/xuanzeqi_202409291358_40.png" class="imgStyle" style="" />
+
+<img src="../assets/xuanzeqi_202409291358_41.png" class="imgStyle" style="" />
+
+可以放置在手动添加的选项或分组之间，仅做样式展示。
+
+## 事件
+
+### 选择器事件
+
+| 事件名    | 描述                     |
+| :----- | :--------------------- |
+| [失去焦点](#失去焦点)  | 选择器失去焦点时触发该事件中的逻辑。     |
+| [选择前](#选择前--选择后)   | 选择项选择前触发该事件中的逻辑。       |
+| [选择时](#)  | 任意选择项选择时触发该事件中的逻辑。     |
+| [选择后](#选择前--选择后)   | 任意选择项选择后触发该事件中的逻辑。     |
+| [改变后](#改变后)  | 选择器选中项改变后触发该事件中的逻辑。    |
+| [弹出前](#弹出前--弹出后)   | 选择器下拉框弹出前触发该事件中的逻辑。    |
+| [弹出后](#弹出前--弹出后)  | 选择器下拉框弹出后触发该事件中的逻辑。    |
+| [关闭前](#关闭前--关闭后)   | 选择器下拉框关闭前触发该事件中的逻辑。    |
+| [关闭后](#关闭前--关闭后)   | 选择器下拉框关闭后触发该事件中的逻辑。    |
+| [加载前](#加载前--加载后)   | 组件数据源绑定逻辑调用前触发该事件中的逻辑。 |
+| [加载后](#加载前--加载后)   | 组件数据源绑定逻辑调用后触发该事件中的逻辑。 |
+| [点击前缀图标](#点击前缀图标--点击后缀图标)| 点击前缀图标后触发该事件中的逻辑。      |
+| [点击后缀图标](#点击前缀图标--点击后缀图标)| 点击后缀图标后触发该事件中的逻辑。      |
+| [搜索前](#搜索前)   | 在选择框中输入搜索内容前触发该事件中的逻辑。 |
+
+#### 失去焦点
+
+- 事件概述：选择器失去焦点时触发该事件中的逻辑。
+
+#### 选择前 / 选择后
+
+- 事件概述：
+
+    - 选择前：任意选择项选择前触发该事件中的逻辑。
+    - 选择后：任意选择项选择后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/xuanzeqi_202409291358_42.png" class="imgStyle" style="width:200px;" />
+
+  - selected：Boolean类型。是否选中。
+  - item：Object类型。当前选择的选项的对象。
+  - oldItem：（空）。
+  - value：数据类型与选择器“值字段“属性的数据类型或选项的“值”属性有关。当前选择选项的选中值，值与选择器“选中值”属性相同。
+  - oldValue：（空）。
+  - items：`List<Object>`类型。当前选择的所有选项的对象的列表。开启选择器“可多选”属性时生效。
+  - oldItems：（空）。
+
+#### 改变后
+
+- 事件概述：选择器选中项改变后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/xuanzeqi_202409291358_43.png" class="imgStyle" style="width:200px;" />
+
+  - item：Object类型。当前选择的选项的对象。
+  - items：`List<Object>`类型。当前选择的所有选项的对象的列表。开启选择器“可多选”属性时生效。
+  - oldItem：（空）。
+  - oldItems：（空）。
+  - value：数据类型与选择器“值字段“属性的数据类型或选项的“值”属性有关。当前选择选项的选中值，值与选择器“选中值”属性相同。
+  - values：`List<V>`类型，V由选择器“值字段“属性的数据类型或选项的“值”属性决定。当前选择选项的选中值的列表，值与选择器“选中值”属性相同。开启选择器“可多选”属性时生效。
+  - oldValue：（空）。
+
+
+
+#### 弹出前 / 弹出后
+
+- 事件概述：
+
+    - 弹出前：选择器下拉框弹出前触发该事件中的逻辑。
+    - 弹出后：选择器下拉框弹出后触发该事件中的逻辑。
+
+#### 关闭前 / 关闭后
+
+- 事件概述：
+
+- 关闭前：选择器下拉框关闭前触发该事件中的逻辑。
+- 关闭后：选择器下拉框关闭后触发该事件中的逻辑。
+
+#### 加载前 / 加载后
+
+- 事件概述：
+
+    - 加载前：组件数据源绑定逻辑调用前触发该事件中的逻辑。
+    - 加载后：组件数据源绑定逻辑调用后触发该事件中的逻辑。
+- 其他说明：触发事件的前提条件是选择器的数据源使用调用逻辑。
+
+#### 点击前缀图标 / 点击后缀图标
+
+- 事件概述：
+
+    - 点击前缀图标：点击前缀图标后触发该事件中的逻辑。
+    - 点击后缀图标：点击后缀图标候触发该事件中的逻辑。
+- 其他说明：触发事件的前提条件是设置选择器的“前缀图标” / “后缀图标”属性。
+
+  <img src="../assets/xuanzeqi_202409291358_44.png" class="imgStyle" style="" />
+
+#### 搜索前
+
+- 事件概述：在选择框中输入搜索内容前触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/xuanzeqi_202409291358_45.png" class="imgStyle" style="width:200px;" />
+
+  - filter：String类型。搜索的内容。
+  - 其他说明：触发事件的前提条件是开启选择器的"筛选“属性。
+
+### 选择项事件
+
+| 事件名 | 描述                |
+| :-- | :---------------- |
+| 选择后 | 选择表格配置项后触发该事件中的逻辑 |
+
+#### 选择前
+
+- 事件概述：当前选择项选择前触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/xuanzeqi_202409291358_46.png" class="imgStyle" style="width:200px;" />
+
+  - selected：（空）。
+  - item：（空）。
+  - oldItem：（空）。
+  - value：数据类型与选择项的“值”属性有关。当前选择选项的选中值，值与选择器“选中值”属性相同。
+  - oldValue：（空）。
+  - items：（空）。
+  - oldItems：（空）。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用选择器组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/xuanzeqi_202409291358_48.png" class="imgStyle" style="width:300px;" />
+
+**选择器**
+
+*   data（数据）：`List<T>` 类型，选择器内容的数据集合，来源于选择器的数据源。支持获取。
+*   total（数据总数）：Integer类型，数据表格数据总数，来源于数据表格的数据源。支持获取。
+*   value（选中值）：数据类型由选择器“值字段“属性的数据类型或选项的“值”属性决定，选择器选中项的值，值与“选中值”属性对齐。支持获取和赋值。
+*   size（分页大小）：Integer类型，选择器当前每页条数。支持获取。
+*   page（当前页数）：Integer类型，选择器当前页数。支持获取。
+*   opened（弹出状态）：Boolean类型，选择器下拉框的弹出状态，值与“弹出状态”属性对齐。支持获取和赋值。
+*   filterText（过滤文本）：String类型，选择器开启“筛选”属性时的搜索内容。支持获取。
+*   noTextValues（没有文本信息的值）：String类型，
+*   disabled（禁用）：Boolean类型，选择器是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+*   readonly（只读）：Boolean类型，选择器是否只读，值与“只读”属性对齐。支持获取和赋值。
+*   preview（预览）：Boolean类型，选择器是否为预览态，值与“预览”属性对齐。支持获取和赋值。
+*   \_if（显示条件）：Boolean类型，选择器是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**选择项**
+
+*   \_if（显示条件）：Boolean类型，选择项是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**选项分组**
+
+*   \_if（显示条件）：Boolean类型，选项分组是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 组件逻辑
+
+页面添加选择器组件后，支持调用选择器的内置逻辑，内置逻辑有：
+
+| 逻辑名     | 描述                  |
+| :------ | :------------------ |
+| [open](#open)    | 打开选择器的下拉框。          |
+| [close](#close)  | 关闭选择器的下拉框。          |
+| [toggle](#toggle) | 切换选择器下拉框状态。         |
+| [reload](#reload) | 清除缓存，重新加载数据。        |
+| [addItem](#additem)| 打开可扩展下拉项，在选择器中添加选项。 |
+
+<img src="../assets/xuanzeqi_202409291358_49.png" class="imgStyle" style="width:400px;" />
+
+### open
+
+- 逻辑概述：打开选择器的下拉框。
+- 其他说明：当选择器聚焦时将自动触发选择器的open。
+
+### close
+
+- 逻辑概述：关闭选择器的下拉框。
+- 其他说明：当选择器失焦时将自动触发选择器的close。
+
+### toggle
+
+- 逻辑概述：切换选择器下拉框状态。若为打开状态，则切换为关闭；若为关闭状态，则切换为打开。
+- 输入参数：
+
+    - opened：Boolean类型选填参数。当选择器的下拉框原本是打开状态时，传入 false后下拉框会关闭，传入true则不操作；当选择器的下拉框原本是关闭状态时，传入 true后下拉框会打开，传入false则不操作。
+
+### reload
+
+- 逻辑概述：清除缓存，重新加载数据。
+- 其他说明：
+  - 当选择器的数据源添加了监听变量，被监听的变量改变时将自动触发选择器的reload。详细说明请参考[组件通用属性说明](../../17.组件通用属性说明.md)-监听变量。
+  - 当选择器的数据源为经过处理的动态数据，即非直接绑定变量，例如在数据源中使用内置函数处理变量或逻辑，初始化选择器和更新动态数据后需要调用组件 reload 重新加载选择器。相关问题详情请参考[动态数据源获取不到数据](../../../../93.版本更新说明/001.版本兼容性问题说明.md)。
+
+### addItem
+
+- 逻辑概述：打开可扩展下拉项，在选择器中添加选项。
+- 输入参数：
+
+    - inFirst：Boolean类型选填参数。传入true时在所有选择项最上方添加新的选项；传入false时在所有选择项最下方添加新的选项；不填写时默认为false。
+    - item：Object类型必填参数。在选择器中添加的选项。
+- 其他说明：组件逻辑addItem的使用方法可以参考选择器打开“可扩展下拉项”属性后点击添加按钮事件中的使用方法。
+
+  <img src="../assets/xuanzeqi_202409291358_50.png" class="imgStyle" style="" />
+
+
+## 插槽
+
+选择器组件中包含插槽，支持拖拽放置其他组件：
+
+- 选择项包含插槽。常见用法如：指示当前选项的内容。
+
+  插槽内无组件时，根据选择项的“选项文本”属性自动生成文本。
+
+  <img src="../assets/xuanzeqi_202412031055_3.png" class="imgStyle" style="width:700px;" />
+
+- 选项分组头部包含插槽。常见用法如：指示当前选项分组的标题信息。
+
+  插槽内无组件时，根据选项分组的“标题”属性自动生成文本。
+
+  <img src="../assets/xuanzeqi_202412031055_4.png" class="imgStyle" style="width:700px;" />
+
+- 若选择器开启“动态选项插槽”属性，选择器在绑定数据源后，下拉框的内容区域包含插槽。插槽中的组件支持根据选择器的数据源来配置信息并动态加载。常见用法如：指示选择器选择项的内容。
+
+  <img src="../assets/xuanzeqi_202412031055_5.png" class="imgStyle" style="width:700px;" />
+
+  当未开启“动态选项插槽”属性，或内容区域的插槽中不包含任何组件（包括布局组件）时，制品应用中显示的选项会根据文本字段动态加载文本，其效果等同于向插槽中拖入文本组件并为文本组件绑定current变量下对应文本字段的值。
+
+  <img src="../assets/xuanzeqi_202412031055_6.png" class="imgStyle" style="" />
+
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+#### 下拉框背景色
+
+- 选择器下拉项背景色：如#223325，默认值inherit。
+- 选择器下拉项背景色（hover状态）：如#223325，默认值#ededed。
+- 选择器下拉项背景色（禁用状态）：如#223325，默认值#ca4039。
+
+#### 下拉框字体颜色
+
+- 选择器下拉项字体颜：如#223325，默认值inherit。
+- 选择器下拉项字体颜色（hover状态）：如#223325，默认值inherit。
+- 选择器下拉项字体颜色（选中状态）：如#223325，默认值white。
+
+#### 宽度
+
+- 选择器的宽度：如1px，默认值240px。
+
+#### 高度
+
+- 选择器的高度：如 1px。默认值32px。
+
+#### 水平方向内边距
+
+- 选择器框水平方向内边距：如 1px。这里只设置左右两边的边距。可填写1个值或者2个值。默认值10px。
+
+#### 背景色
+
+- 选择器背景色：如 #223325。默认值white。
+
+#### 边框
+
+- 选择器的边框宽度：如 1px。默认值1px。
+- 选择器的边框颜色：如 #223325。默认值#e5e5e5。
+
+#### 字体
+
+- 选择器的字体颜色：如 #223325。默认值#333333。
+
+#### 弹出层
+
+- 选择器的弹出层最大高度：如 1px。默认值194px。
+- 选择器的弹出层阴影效果：如 1px。默认值0 0 4px rgba(3, 3, 3, .1)。
+- 选择器的弹出层背景色：如 #223325。默认值white。
+- 选择器的弹出层边框颜色：如 #223325。默认值#e5e5e5。
+- Inverse选择器的弹出层边框颜色：如 #223325。默认值#212123。
+- 选择器的弹出层边框阴影效果：如 2px 2px 2px 1px rgba(0, 0, 0, 0.2)。默认值0 0 0 2px rgba(77, 136, 255, 0.2)。
+- 选择项checkbox的边框：开启“可多选”时，多选框的边框样式，如1px solid red。
+
+#### 占位符
+
+- 选择器的占位符文字颜色：如 #223325。默认值#ccc。
+
+#### 下拉箭头
+
+- 选择器的下拉箭头颜色：如 #223325。默认值#999999。
+- 选择器的下拉箭头大小：如 1px。默认值18px。
+- 选择器的下拉箭头右边距计算倍数：如 1。默认值0.6。
+
+#### 状态颜色
+
+- 选择器状态颜色：如 #223325。默认值#999999。
+
+#### 只读状态
+
+- 选择器下拉项的字体颜色（只读状态下）：如 #223325。默认值inherit。
+- 选择器下拉项的背景颜色（只读状态下）：如 #223325。默认值none。
+
+#### 禁用状态
+
+- 选择器下拉项的字体颜色（禁用状态下）：如 #223325。默认值inherit。
+- 选择器下拉项的背景颜色（禁用状态下）：如 #223325。默认值#ededed。
+
+#### 多选状态
+
+- 选择器下拉项的字体颜色（多选状态下）：如 #223325。默认值inherit。
+- 选择器下拉项的背景颜色（多选状态下）：如 #223325。默认值none。
+- 选择器下拉项的字体颜色（多选hover状态下）：如 #223325。默认值inherit。
+- 选择器下拉项的背景颜色（多选hover状态下）：如 #223325。默认值#ededed。
+- 选择项checkbox的背景颜色：开启“可多选”时，多选框的背景颜色，默认值white。
+- 选择项checkbox的选中图标颜色：开启“可多选”时，多选框被选择时的图标颜色，默认值#517cff。
+- 选择项checkbox的半选择图标颜色：开启“可多选”时，多选框被半选时的图标颜色，默认值#517cff。
+
+#### 其他
+
+- 选择器输入框边框颜色（错误状态）：如 #223325。默认值#F24957。
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/xuanzeqi_202411121745_10.png" class="imgStyle" style="" />
+
+
+## 使用说明
+
+- 在平台中，可直接拖拽实体或枚举生成选择器，应用支持自动生成对应的数据源。
+
+    - 拖拽实体生成选择器。应用自动生成查询实体全部数据的服务端逻辑并绑定为选择器的数据源；自动配置文本字段和值字段，若不符合要求，可根据具体需求修改。
+
+      <img src="../assets/xuanzeqi_202409291358_53.gif" class="imgStyle" style="" />
+
+      <img src="../assets/xuanzeqi_202409291358_54.png" class="imgStyle" style="" />
+
+    - 拖拽枚举生成选择器。应用自动使用内置函数EnumToList返回枚举value和text的List集合作为选择器的数据源，value即枚举值，text即标题。拖拽枚举生成的选择器会有一个“全部”选项，可根据具体需求保留或删除。
+
+      <img src="../assets/xuanzeqi_202409291358_55.gif" class="imgStyle" style="" />
+
+      <img src="../assets/xuanzeqi_202409291358_56.png" class="imgStyle" style="" />
+
+- 选择器支持动态数据和静态数据同时渲染，绑定数据源生成的选择项在静态添加的选择项后面显示。
+
+## 示例
+
+### 需求场景
+
+在审批流程中使用选择器选择对应角色的审批状态，并将选择的结果展示在页面中，实现效果如下图所示。
+
+<img src="../assets/xuanzeqi_202409291358_57.gif" class="imgStyle" style="" />
+
+### 操作步骤
+
+1.  创建如下枚举。
+
+    <img src="../assets/xuanzeqi_202409291358_58.png" class="imgStyle" style="" />
+
+1.  在页面中拖拽文本组件并将文本属性改为“选择人员审批”作为标识。在文本组件后拖拽枚举Status生成选择器，并点击展开选择器，删除自动生成的“全部”选项。
+
+    <img src="../assets/xuanzeqi_202409291358_59.png" class="imgStyle" style="" />
+
+1.  将选择器的文本字段和值字段都点击绑定为text。
+
+    <img src="../assets/xuanzeqi_202409291358_60.png" class="imgStyle" style="" />
+
+1.  在页面中创建String类型的局部变量select，并将选择器的选中值绑定为该变量。
+
+    <img src="../assets/xuanzeqi_202409291358_61.png" class="imgStyle" style="" />
+
+1.  开启选择器的“可多选”属性，“多选项展示形式”属性选择为过多时显示，“转换器”选择以','连接。
+2.  拖拽文本组件至选择框后，并将文本属性绑定为select变量，帮助展示选择后呈现的效果。
+
+    <img src="../assets/xuanzeqi_202409291358_62.png" class="imgStyle" style="" />
+
+1.  点击IDE右上角预览按钮，完成发布预览，确认最终效果。
+
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年02月11日</span>
+</div>
+
+<style>
+ .highlight {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 20px 10px 20px;
+      margin-bottom:20px;
+      margin-top:20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+</style>