{"RequestId":"85462bc2-b1b0-4471-9703-f80d1c9cf629","Code":200,"Message":"","StackTrace":"","Data":{"id":2835723690605568,"createdTime":"2024-03-27T07:42:53.000Z","updatedTime":"2024-04-03T03:04:41.000Z","fileName":"173.选择器.md","filePath":"20.应用开发/10.页面设计/20.PC端页面组件使用/70.选择器/173.选择器.md","title":"选择器","content":"# 选择器\n\n下拉选项选择,支持单选、多选、筛选等功能。选择器组件常用于可选择的场景,例如表单和数据筛选等。\n\n\n\n## 属性\n\n> 组件通用属性请参见[组件通用属性说明](20.应用开发/10.页面设计/17.组件通用属性说明.md)。\n\n### 选择器\n\n#### 数据属性\n\n* 数据源:组件所使用的数据的来源 。支持绑定静态数据源和动态数据源。\n\n * 静态数据源\n\n * 在编辑表达式关闭时,可直接在数据源中输入包含text和value的List,例如[{ text:'语文', value:'语文'},{ text: '数学', value: '数学'},{ text: '英语', value: '英语' }]。\n\n \n * 可以直接为选择器手动添加选项,在选项中可直接设置每个选项的值和选项展示的文本。\n\n \n * 动态数据源:可绑定 `List<T>`类型变量,或输出参数为数组或包含 `List<T>`的匿名数据结构的逻辑。逻辑包含前端逻辑和服务端逻辑,`List<T>`中T的类型可以是任意类型(包括 `List<T>` 、联合类型)。例如绑定输出结果为 `{list:List<{student:Student}>,total:10}`的服务端逻辑。\n\n 操作步骤:\n\n 1. 开启编辑表达式。\n\n \n 2. 点击输入框进入编辑表达式页面,拖入变量或使用调用逻辑组件,可使用组件自带的参数。\n\n \n* 数据类型:数据源返回的数据结构的类型,自动识别类型进行展示说明,为只读状态无法修改。\n* 选中值:当前选中的值,若选项通过绑定数据源生成,其数据类型与值字段的类型相关;若选项通过手动添加选项生成,其数据类型与选择项的“值”属性有关。当组件为多选时,该值为List类型;当多选后使用转换器时,该值为String类型。“选中值”默认开启编辑表达式功能,编辑表达式时若直接绑定变量,支持开启“是否将组件输入赋值给变量“,开启时会根据选择的选项的“值字段”属性对应值或选择项的“值”属性改变变量的值,也会根据变量的值展示当前选择的选项。编辑表达式时若包含其他表达式,则仅支持根据表达式展示当前选择的选项,建议搭配“只读”属性使用。\n\n \n* 文本字段:绑定数据源后,下拉框中展示的文本。当数据源设置为动态数据源时,可点击选择数据类型中的属性作为文本字段;当动态数据源的数据类型为基础类型时,默认为item且不可修改。当数据源为直接写入的静态数据源时,文本字段默认展示结构中text字段且无法修改。\n* 值字段:绑定数据源后,在下拉框中选中某个数据后获取的值。当数据源设置为动态数据源时,可点击选择数据类型中的属性作为值字段;当动态数据源的数据类型为基础类型时,默认为item且不可修改。当数据源为直接写入的静态数据源时,文本字段默认展示结构中value字段且无法修改。\n* 分页:设置是否分页展示数据,即当前页数据加载触底后展示下一页数据。默认关闭。\n* 默认分页条数:选择每页中展示多少条数据,最小展示数量为10条,默认展示数据为50条。开启“分页”属性时生效。\n\n * 当“数据源”为前端数据,即数据不经过服务端逻辑处理,开启“分页”属性并配置“默认分页条数”即可实现分页功能。\n * 当\"数据源“需要调用服务端逻辑时,若开启“分页”,组件可以获取到分页的大小和当前的页数,将属性传递到服务端逻辑并在查询的数据中完成分页规则配置即可实现分页,参考操作步骤如下:\n\n 1. 为需要调用的查询数据的服务端逻辑添加两个Integer类型输入参数page和size。\n\n \n 2. 双击编辑数据查询,进入分页排序界面,将输入参数作为分页参数。\n\n \n 3. 返回选择器组件的数据源,将当前组件的size和page属性作为输入参数传入服务端逻辑。\n\n \n* 初始化排序规则:设置初始化排序的字段和排序规则,当数据源设置为动态数据源时,可点击选择数据类型中的属性作为排序规则,排序规则默认值升序。\n* 选项辅助文本:绑定数据源后,选项的辅助说明信息,展示在选项下,默认关闭。\n* 辅助文本字段:开启选项辅助文本后,用于显示在选项下的辅助描述选项的字段,当数据源设置为动态数据源时,可点击选择数据类型中的属性作为辅助文本。\n\n \n* 图标展示字段:用于显示在文本前面的图标,当数据源设置为动态数据源时,可点击选择数据类型中的属性作为展示图标的字段。\n* 筛选:开启后选择器可输入文本根据“文本字段”进行筛选,默认关闭。\n\n * 当“数据源”为前端数据,即数据不经过服务端逻辑处理,开启“筛选”属性即可实现筛选功能。\n * 当\"数据源“需要调用服务端逻辑时,需要将页面组件的过滤文本属性传递到服务端逻辑并在查询的数据中完成筛选配置,参考操作步骤如下:\n\n 1. 进入选择器组件数据源绑定的服务端逻辑,为服务端逻辑添加String类型输入参数filterText。\n\n \n 2. 双击编辑数据查询,进入筛选条件界面,将输入参数作为筛选条件。使用的数据筛选组件建议与选择器组件的“匹配方式“属性保持一致;筛选的实体属性建议与选择器组件的“文本字段”属性保持一致。\n\n \n 3. 返回选择器组件的数据源,将当前组件的filterText属性作为输入参数传入服务端逻辑。\n\n \n* 匹配方法:开启筛选后,支持筛选过滤时的匹配方法,支持包括、匹配开头和匹配结尾共三种模式。开启“筛选”属性时生效。适用于数据源进行前端筛选的情况。\n\n#### 主要属性\n\n* 可扩展下拉项:设置是否开启可扩展下拉项,开启后可自定义添加下拉框选项,点击添加后可添加在下拉框内。该属性适用于“文本字段”属性有效的选择器,即选择器添加数据源后有效。\n\n \n\n * 当选择器“文本字段”和“值字段”属性为默认值text和value时,若开启“可扩展下拉项”属性,默认生成的局部变量和事件参考如下:\n\n \n 默认生成的“可扩展下拉项”功能支持获取新增选项的文本,可根据具体需求修改后使用,例如添加value属性用于获取新增选项的选中值。\n\n \n * 当选择器“文本字段”根据绑定的数据源修改后,若开启“可扩展下拉项”属性,默认生成局部变量和事件与绑定的数据源的数据类型有关。例如已有前提条件:选择器已绑定数据源,数据类型与实体相关;根据实体设置“文本字段”。\n\n \n 此时开启“可扩展下拉项”属性后,默认生成的局部变量和事件参考如下:在本示例中,由于事件中调用了实体的create逻辑,新添加的选项能够作为实体信息长期存储在选择器中,可根据具体需求修改后使用。\n\n \n\n \n\n > 若开启“可扩展下拉项”属性后显示如下错误,可以删除匿名数据结构的已选数据类型,由应用重新判断数据类型;或手动更改数据类型。\n >\n\n \n* 全选控制:支持点击全选选项后选中全部选项,默认关闭。开启“可多选”属性时生效。\n\n \n* 全选展示内容:全选选项展示的文本内容,默认为“全选”。开启“全选控制”属性时生效。\n\n > 在制品应用中,点击全选选项无法触发选择器的“选择前”和“选择后”事件,如有需要,可使用“改变后”事件。\n* 转换器:开启可多选后,将选中的值用选择的符号作为连接符,转为对应格式,支持以‘,’连接,以‘|’连接,以‘;’连接,json和无共五种模式,选择json则是转为json格式,其他则为字符串格式。未使用转换器时选中值为List类型。\n* 占位符:选择器无内容时的提示信息,支持自定义编辑,默认值“请选择”。\n* 自动获取焦点:在进入页面时,是否自动聚焦到该组件,默认关闭。如进入页面时必填选项自动获取焦点。\n* 前缀图标:支持在占位符前添加图标,如搜索图标。\n* 后缀图标:支持在选择器后添加图标,如搜索图标。\n\n \n* 弹出层位置依据:设置弹出层依据哪个元素定位位置,支持全局body、引入元素下共两种模式。\n\n * 弹出层位置依据为全局body时\n\n \n * 弹出层位置依据为引入元素下时\n\n \n\n#### 交互属性\n\n* 可清除:设置清除按钮一键清除选择的所有内容,默认关闭。\n* 可多选:设置可多选,默认关闭。\n* 可多选展示形式:选择的选项过多时展示的形式,支持过多时省略、过多时收缩、过多时显示共三种模式。\n\n > 如下效果:开启可多选,多选展示形式为过多时省略。\n > \n >\n\n#### 状态属性\n\n* 初始即加载:设置初始时立即加载,开启后当数据源绑定逻辑时会调用相对应的逻辑。如逻辑中有输入参数需调用其他逻辑获取,建议关闭初始加载并在入参获取后再调用对应的数据源逻辑。\n* 展示暂无数据文案:设置暂无数据时是否展示暂无数据的文字提示,默认开启。\n* 暂无数据文案:暂无数据时展示的文字提示,默认值暂无数据。\n* 为空自动禁用:选择器中数据源无数据时,置灰展示且禁止任何交互(焦点、点击、选择、输入等),默认关闭。\n* 只读:选择器正常展示,但禁止选择和输入,默认关闭。\n* 禁用:禁止任何交互(焦点、点击、选择、输入等),默认关闭。\n* 弹出状态:选择器的下拉框是否为弹出状态,默认关闭。关闭编辑表达式,可直接手动选择当前选择器的状态;开启编辑表达式绑定为Boolean类型内容,可实现动态的展示效果。\n\n * 关闭编辑表达式:关闭编辑表达式时直接展示下拉框的弹出状态。\n\n \n * 开启编辑表达式:编辑表达式时若直接绑定Boolean类型变量,支持开启“是否将组件输入赋值给变量“,开启时会根据下拉框的状态改变变量的值,也会根据变量的值展示下拉框的状态。编辑表达式时若包含其他表达式,则仅支持根据表达式展示当前下拉框的状态。\n\n \n\n#### 样式属性\n\n* 宽度:设置选择器宽度大小,支持占满、巨大、大、中型、正常、小、迷你共七种模式。\n* 高度:设置选择器高度大小,支持占满、巨大、大、中型、正常、小、迷你共七种模式。\n\n### 选择项\n\n\n\n\n\n#### 数据属性\n\n* 值:选中下拉框中的数据后获取的值。可手动输入内容或编辑表达式。当选择项被选中时,选择器的“选中值”会包含该值。\n\n * 手动输入:\n\n \n * 编辑表达式:编辑表达式时建议绑定基础类型变量。\n\n \n* 选项辅助文本:选项的辅助说明信息,展示在选项下。\n\n#### 主要属性\n\n* 选项文本:选择后展示在选择框中的文本。删除选择项中的文本组件后有效。\n\n \n\n#### 状态属性\n\n* 禁用:禁止任何交互(焦点、点击、选择等),默认关闭。\n\n### 选项分组\n\n\n\n\n\n#### 主要属性\n\n* 标题:选择分组的标题,在标题插槽中没有文本组件时生效。\n\n > 选项分组下可以继续添加该分组下的选项。\n >\n\n \n\n### 分割线\n\n\n\n\n\n可以放置在手动添加的选项或分组之间,仅做样式展示。\n\n## 事件\n\n### 选择器\n\n* 失去焦点:失去焦点时触发。\n* 选择前:单选项选择前触发。\n* 选择时:单选项选择时触发。\n* 选择后:单选项选择后触发。\n* 改变后:单选组改变选择后触发。\n* 弹出前:下拉框弹出前触发。\n* 弹出后:下拉框弹出后触发。\n* 关闭前:下拉框关闭前触发。\n* 关闭后:下拉框关闭后触发。\n* 加载前:组件数据源绑定逻辑调用前触发。\n* 加载后:组件数据源绑定逻辑调用后触发。\n* 点击前缀图标:点击前缀图标后触发。\n* 点击后缀图标:点击后缀图标候触发。\n* 搜索前:打开可筛选属性后输入搜索前触发。\n\n### 选择项\n\n* 选择前:单选项选择前触发\n\n## 组件逻辑\n\n页面添加选择器组件后,支持调用选择器的内置逻辑,内置逻辑有:\n\n\n\n* open:打开选择器的下拉框。\n* close:关闭选择器的下拉框。\n* toggle:切换选择器下拉框状态。若为打开状态,则切换为关闭;若为关闭状态,则切换为打开。\n\n * opened?:可选参数,支持传入Boolean布尔值类型的变量。当选择器的下拉框原本是打开状态时,传入 false后下拉框会关闭,传入true则不操作;当选择器的下拉框原本是关闭状态时,传入 true后下拉框会打开,传入false则不操作。\n* reload:重新加载选择器中的数据。\n* addItem:打开可扩展下拉项,在选择器中添加选项。\n\n * inFirst:可选参数,支持传入Boolean布尔值类型的变量。传入true时在所有选择项最上方添加新的选项;传入false时在所有选择项最下方添加新的选项;不填写时默认为false。\n * item:添加的选项。\n\n > 组件逻辑addItem的使用方法可以参考选择器打开“可扩展下拉项”属性后点击添加按钮事件中的使用方法。\n >\n\n \n\n## 样式\n\n> 通用组件通用样式请参见[组件通用样式说明](20.应用开发/10.页面设计/18.组件通用样式说明.md)。\n\n### 主题样式\n\n#### 下拉框背景色\n\n* 选择器下拉项背景色:如 `#223325`,默认值inherit。\n* 选择器下拉项背景色(hover状态):如 `#223325`,默认值 `#ededed`。\n* 选择器下拉项背景色(禁用状态):如 `#223325`,默认值 `#ca4039`。\n\n#### 下拉框字体颜色\n\n* 选择器下拉项字体颜:如 `#223325`,默认值inherit。\n* 选择器下拉项字体颜色(hover状态):如 `#223325`,默认值inherit。\n* 选择器下拉项字体颜色(选中状态):如 `#223325`,默认值white。\n\n#### 宽度\n\n* 选择器的宽度:如1px,默认值240px。\n\n#### 高度\n\n* 选择器的高度:如 1px。默认值32px。\n\n#### 水平方向内边距\n\n* 选择器框水平方向内边距:如 1px。这里只设置左右两边的边距。可填写1个值或者2个值。默认值10px。\n\n#### 背景色\n\n* 选择器背景色:如 `#223325`。默认值white。\n\n#### 边框\n\n* 选择器的边框宽度:如 1px。默认值1px。\n* 选择器的边框颜色:如 ` #223325`。默认值#e5e5e5。\n\n#### 字体\n\n* 选择器的字体颜色:如 `#223325`。默认值#333333。\n\n#### 弹出层\n\n* 选择器的弹出层最大高度:如 1px。默认值194px。\n* 选择器的弹出层阴影效果:如 1px。默认值0 0 4px rgba(3, 3, 3, .1)。\n* p选择器的弹出层背景色:如 ` #223325`。默认值white。\n* 选择器的弹出层边框颜色:如 `#223325`。默认值 `#e5e5e5`。\n* Inverse选择器的弹出层边框颜色:如 `#223325`。默认值 `#212123`。\n* 选择器的弹出层边框阴影效果:如 2px 2px 2px 1px rgba(0, 0, 0, 0.2)。默认值0 0 0 2px rgba(77, 136, 255, 0.2)。\n\n#### 占位符\n\n* 选择器的占位符文字颜色:如 `#223325`。默认值#ccc。\n\n#### 下拉箭头\n\n* 选择器的下拉箭头颜色:如 `#223325`。默认值 `#999999`。\n* 选择器的下拉箭头大小:如 1px。默认值18px。\n* 选择器的下拉箭头右边距计算倍数:如 1。默认值0.6。\n\n#### 状态颜色\n\n* 选择器状态颜色:如 `#223325`。默认值 `#999999`。\n\n#### 只读状态\n\n* 选择器下拉项的字体颜色(只读状态下):如 `#223325`。默认值inherit。\n* 选择器下拉项的背景颜色(只读状态下):如 `#223325`。默认值none。\n\n#### 禁用状态\n\n* 选择器下拉项的字体颜色(禁用状态下):如 `#223325`。默认值inherit。\n* 选择器下拉项的背景颜色(禁用状态下):如 `#223325`。默认值#ededed。\n\n#### 多选状态\n\n* 选择器下拉项的字体颜色(多选状态下):如 `#223325`。默认值inherit。\n* 选择器下拉项的背景颜色(多选状态下):如 `#223325`。默认值none。\n* 选择器下拉项的字体颜色(多选hover状态下):如 `#223325`。默认值inherit。\n* 选择器下拉项的背景颜色(多选hover状态下):如 `#223325`。默认值 `#ededed`。\n\n#### 其他\n\n* 选择器输入框边框颜色(错误状态):如 `#223325`。默认值 `#F24957`。\n\n## 使用说明\n\n* 在平台中,可直接拖拽实体或枚举生成选择器,应用支持自动生成对应的数据源。\n\n * 拖拽实体生成选择器。应用自动生成查询实体全部数据的服务端逻辑并绑定为选择器的数据源;自动配置文本字段和值字段,若不符合要求,可根据具体需求修改。\n\n \n\n \n * 拖拽枚举生成选择器。应用自动使用内置函数EnumToList返回枚举value和text的List集合作为选择器的数据源,value即枚举值,text即标题。拖拽枚举生成的选择器会有一个“全部”选项,可根据具体需求保留或删除。\n\n \n\n \n\n## 示例\n\n### 需求场景\n\n在审批流程中使用选择器选择对应角色的审批状态,并将选择的结果展示在页面中,实现效果如下图所示。\n\n\n\n### 操作步骤\n\n1. 创建如下枚举。\n\n \n2. 在页面中拖拽文本组件并将文本属性改为“选择人员审批”作为标识。在文本组件后拖拽枚举Status生成选择器,并点击展开选择器,删除自动生成的“全部”选项。\n\n \n3. 将选择器的文本字段和值字段都点击绑定为text。\n\n \n4. 在页面中创建String类型的局部变量select,并将选择器的选中值绑定为该变量。\n\n \n5. 开启选择器的“可多选”属性,“多选项展示形式”属性选择为过多时显示,“转换器”选择以','连接。\n6. 拖拽文本组件至选择框后,并将文本属性绑定为select变量,帮助展示选择后呈现的效果。\n\n \n7. 点击IDE右上角预览按钮,完成发布预览,确认最终效果。\n\n<div style=\"text-align: right;font-size: 14px;\">\n <span style=\"color: rgb(78, 110, 142);\">创建人:</span>\n <span style=\"color: rgb(118, 118, 118);\">有鲤</span>\n <span style=\"color: rgb(78, 110, 142);margin: 0 0 0 40px;\">更新时间:</span>\n <span style=\"color: rgb(118, 118, 118);\">2024年01月09日</span>\n</div>\n","esContent":"选择器 下拉选项选择,支持单选、多选、筛选等功能。选择器组件常用于可选择的场景,例如表单和数据筛选等。 ! 属性 «组件通用属性请参见组件通用属性说明。» 选择器 数据属性 * 数据源:组件所使用的数据的来源 。支持绑定静态数据源和动态数据源。 * 静态数据源 * 在编辑表达式关闭时,可直接在数据源中输入包含text和value的List,例如[{ text:'语文', value:'语文'},{ text: '数学', value: '数学'},{ text: '英语', value: '英语' }]。! * 可以直接为选择器手动添加选项,在选项中可直接设置每个选项的值和选项展示的文本。! * 动态数据源:可绑定 List<T>类型变量,或输出参数为数组或包含 List<T>的匿名数据结构的逻辑。逻辑包含前端逻辑和服务端逻辑,List<T>中T的类型可以是任意类型(包括 List<T> 、联合类型)。例如绑定输出结果为 {list:List<{student:Student}>,total:10}的服务端逻辑。操作步骤: 1. 开启编辑表达式。! 2. 点击输入框进入编辑表达式页面,拖入变量或使用调用逻辑组件,可使用组件自带的参数。! * 数据类型:数据源返回的数据结构的类型,自动识别类型进行展示说明,为只读状态无法修改。 * 选中值:当前选中的值,若选项通过绑定数据源生成,其数据类型与值字段的类型相关;若选项通过手动添加选项生成,其数据类型与选择项的“值”属性有关。当组件为多选时,该值为List类型;当多选后使用转换器时,该值为String类型。“选中值”默认开启编辑表达式功能,编辑表达式时若直接绑定变量,支持开启“是否将组件输入赋值给变量“,开启时会根据选择的选项的“值字段”属性对应值或选择项的“值”属性改变变量的值,也会根据变量的值展示当前选择的选项。编辑表达式时若包含其他表达式,则仅支持根据表达式展示当前选择的选项,建议搭配“只读”属性使用。! * 文本字段:绑定数据源后,下拉框中展示的文本。当数据源设置为动态数据源时,可点击选择数据类型中的属性作为文本字段;当动态数据源的数据类型为基础类型时,默认为item且不可修改。当数据源为直接写入的静态数据源时,文本字段默认展示结构中text字段且无法修改。 * 值字段:绑定数据源后,在下拉框中选中某个数据后获取的值。当数据源设置为动态数据源时,可点击选择数据类型中的属性作为值字段;当动态数据源的数据类型为基础类型时,默认为item且不可修改。当数据源为直接写入的静态数据源时,文本字段默认展示结构中value字段且无法修改。 * 分页:设置是否分页展示数据,即当前页数据加载触底后展示下一页数据。默认关闭。 * 默认分页条数:选择每页中展示多少条数据,最小展示数量为10条,默认展示数据为50条。开启“分页”属性时生效。 * 当“数据源”为前端数据,即数据不经过服务端逻辑处理,开启“分页”属性并配置“默认分页条数”即可实现分页功能。 * 当数据源“需要调用服务端逻辑时,若开启“分页”,组件可以获取到分页的大小和当前的页数,将属性传递到服务端逻辑并在查询的数据中完成分页规则配置即可实现分页,参考操作步骤如下: 1. 为需要调用的查询数据的服务端逻辑添加两个Integer类型输入参数page和size。! 2. 双击编辑数据查询,进入分页排序界面,将输入参数作为分页参数。! 3. 返回选择器组件的数据源,将当前组件的size和page属性作为输入参数传入服务端逻辑。! * 初始化排序规则:设置初始化排序的字段和排序规则,当数据源设置为动态数据源时,可点击选择数据类型中的属性作为排序规则,排序规则默认值升序。 * 选项辅助文本:绑定数据源后,选项的辅助说明信息,展示在选项下,默认关闭。 * 辅助文本字段:开启选项辅助文本后,用于显示在选项下的辅助描述选项的字段,当数据源设置为动态数据源时,可点击选择数据类型中的属性作为辅助文本。! * 图标展示字段:用于显示在文本前面的图标,当数据源设置为动态数据源时,可点击选择数据类型中的属性作为展示图标的字段。 * 筛选:开启后选择器可输入文本根据“文本字段”进行筛选,默认关闭。 * 当“数据源”为前端数据,即数据不经过服务端逻辑处理,开启“筛选”属性即可实现筛选功能。 * 当数据源“需要调用服务端逻辑时,需要将页面组件的过滤文本属性传递到服务端逻辑并在查询的数据中完成筛选配置,参考操作步骤如下: 1. 进入选择器组件数据源绑定的服务端逻辑,为服务端逻辑添加String类型输入参数filterText。! 2. 双击编辑数据查询,进入筛选条件界面,将输入参数作为筛选条件。使用的数据筛选组件建议与选择器组件的“匹配方式“属性保持一致;筛选的实体属性建议与选择器组件的“文本字段”属性保持一致。! 3. 返回选择器组件的数据源,将当前组件的filterText属性作为输入参数传入服务端逻辑。! * 匹配方法:开启筛选后,支持筛选过滤时的匹配方法,支持包括、匹配开头和匹配结尾共三种模式。开启“筛选”属性时生效。适用于数据源进行前端筛选的情况。 主要属性 * 可扩展下拉项:设置是否开启可扩展下拉项,开启后可自定义添加下拉框选项,点击添加后可添加在下拉框内。该属性适用于“文本字段”属性有效的选择器,即选择器添加数据源后有效。! * 当选择器“文本字段”和“值字段”属性为默认值text和value时,若开启“可扩展下拉项”属性,默认生成的局部变量和事件参考如下:! 默认生成的“可扩展下拉项”功能支持获取新增选项的文本,可根据具体需求修改后使用,例如添加value属性用于获取新增选项的选中值。! * 当选择器“文本字段”根据绑定的数据源修改后,若开启“可扩展下拉项”属性,默认生成局部变量和事件与绑定的数据源的数据类型有关。例如已有前提条件:选择器已绑定数据源,数据类型与实体相关;根据实体设置“文本字段”。! 此时开启“可扩展下拉项”属性后,默认生成的局部变量和事件参考如下:在本示例中,由于事件中调用了实体的create逻辑,新添加的选项能够作为实体信息长期存储在选择器中,可根据具体需求修改后使用。!!«若开启“可扩展下拉项”属性后显示如下错误,可以删除匿名数据结构的已选数据类型,由应用重新判断数据类型;或手动更改数据类型。» ! * 全选控制:支持点击全选选项后选中全部选项,默认关闭。开启“可多选”属性时生效。! * 全选展示内容:全选选项展示的文本内容,默认为“全选”。开启“全选控制”属性时生效。«在制品应用中,点击全选选项无法触发选择器的“选择前”和“选择后”事件,如有需要,可使用“改变后”事件。» * 转换器:开启可多选后,将选中的值用选择的符号作为连接符,转为对应格式,支持以‘,’连接,以‘|’连接,以‘;’连接,json和无共五种模式,选择json则是转为json格式,其他则为字符串格式。未使用转换器时选中值为List类型。 * 占位符:选择器无内容时的提示信息,支持自定义编辑,默认值“请选择”。 * 自动获取焦点:在进入页面时,是否自动聚焦到该组件,默认关闭。如进入页面时必填选项自动获取焦点。 * 前缀图标:支持在占位符前添加图标,如搜索图标。 * 后缀图标:支持在选择器后添加图标,如搜索图标。! * 弹出层位置依据:设置弹出层依据哪个元素定位位置,支持全局body、引入元素下共两种模式。 * 弹出层位置依据为全局body时! * 弹出层位置依据为引入元素下时! 交互属性 * 可清除:设置清除按钮一键清除选择的所有内容,默认关闭。 * 可多选:设置可多选,默认关闭。 * 可多选展示形式:选择的选项过多时展示的形式,支持过多时省略、过多时收缩、过多时显示共三种模式。«如下效果:开启可多选,多选展示形式为过多时省略。 !» 状态属性 * 初始即加载:设置初始时立即加载,开启后当数据源绑定逻辑时会调用相对应的逻辑。如逻辑中有输入参数需调用其他逻辑获取,建议关闭初始加载并在入参获取后再调用对应的数据源逻辑。 * 展示暂无数据文案:设置暂无数据时是否展示暂无数据的文字提示,默认开启。 * 暂无数据文案:暂无数据时展示的文字提示,默认值暂无数据。 * 为空自动禁用:选择器中数据源无数据时,置灰展示且禁止任何交互(焦点、点击、选择、输入等),默认关闭。 * 只读:选择器正常展示,但禁止选择和输入,默认关闭。 * 禁用:禁止任何交互(焦点、点击、选择、输入等),默认关闭。 * 弹出状态:选择器的下拉框是否为弹出状态,默认关闭。关闭编辑表达式,可直接手动选择当前选择器的状态;开启编辑表达式绑定为Boolean类型内容,可实现动态的展示效果。 * 关闭编辑表达式:关闭编辑表达式时直接展示下拉框的弹出状态。! * 开启编辑表达式:编辑表达式时若直接绑定Boolean类型变量,支持开启“是否将组件输入赋值给变量“,开启时会根据下拉框的状态改变变量的值,也会根据变量的值展示下拉框的状态。编辑表达式时若包含其他表达式,则仅支持根据表达式展示当前下拉框的状态。! 样式属性 * 宽度:设置选择器宽度大小,支持占满、巨大、大、中型、正常、小、迷你共七种模式。 * 高度:设置选择器高度大小,支持占满、巨大、大、中型、正常、小、迷你共七种模式。 选择项 ! ! 数据属性 * 值:选中下拉框中的数据后获取的值。可手动输入内容或编辑表达式。当选择项被选中时,选择器的“选中值”会包含该值。 * 手动输入:! * 编辑表达式:编辑表达式时建议绑定基础类型变量。! * 选项辅助文本:选项的辅助说明信息,展示在选项下。 主要属性 * 选项文本:选择后展示在选择框中的文本。删除选择项中的文本组件后有效。! 状态属性 * 禁用:禁止任何交互(焦点、点击、选择等),默认关闭。 选项分组 ! ! 主要属性 * 标题:选择分组的标题,在标题插槽中没有文本组件时生效。«选项分组下可以继续添加该分组下的选项。» ! 分割线 ! ! 可以放置在手动添加的选项或分组之间,仅做样式展示。 事件 选择器 * 失去焦点:失去焦点时触发。 * 选择前:单选项选择前触发。 * 选择时:单选项选择时触发。 * 选择后:单选项选择后触发。 * 改变后:单选组改变选择后触发。 * 弹出前:下拉框弹出前触发。 * 弹出后:下拉框弹出后触发。 * 关闭前:下拉框关闭前触发。 * 关闭后:下拉框关闭后触发。 * 加载前:组件数据源绑定逻辑调用前触发。 * 加载后:组件数据源绑定逻辑调用后触发。 * 点击前缀图标:点击前缀图标后触发。 * 点击后缀图标:点击后缀图标候触发。 * 搜索前:打开可筛选属性后输入搜索前触发。 选择项 * 选择前:单选项选择前触发 组件逻辑 页面添加选择器组件后,支持调用选择器的内置逻辑,内置逻辑有: ! * open:打开选择器的下拉框。 * close:关闭选择器的下拉框。 * toggle:切换选择器下拉框状态。若为打开状态,则切换为关闭;若为关闭状态,则切换为打开。 * opened?:可选参数,支持传入Boolean布尔值类型的变量。当选择器的下拉框原本是打开状态时,传入 false后下拉框会关闭,传入true则不操作;当选择器的下拉框原本是关闭状态时,传入 true后下拉框会打开,传入false则不操作。 * reload:重新加载选择器中的数据。 * addItem:打开可扩展下拉项,在选择器中添加选项。 * inFirst:可选参数,支持传入Boolean布尔值类型的变量。传入true时在所有选择项最上方添加新的选项;传入false时在所有选择项最下方添加新的选项;不填写时默认为false。 * item:添加的选项。 «组件逻辑addItem的使用方法可以参考选择器打开“可扩展下拉项”属性后点击添加按钮事件中的使用方法。» ! 样式 «通用组件通用样式请参见组件通用样式说明。» 主题样式 下拉框背景色 * 选择器下拉项背景色:如 #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)。 * p选择器的弹出层背景色:如 #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)。 占位符 * 选择器的占位符文字颜色:如 #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。 其他 * 选择器输入框边框颜色(错误状态):如 #223325。默认值 #F24957。 使用说明 * 在平台中,可直接拖拽实体或枚举生成选择器,应用支持自动生成对应的数据源。 * 拖拽实体生成选择器。应用自动生成查询实体全部数据的服务端逻辑并绑定为选择器的数据源;自动配置文本字段和值字段,若不符合要求,可根据具体需求修改。!! * 拖拽枚举生成选择器。应用自动使用内置函数EnumToList返回枚举value和text的List集合作为选择器的数据源,value即枚举值,text即标题。拖拽枚举生成的选择器会有一个“全部”选项,可根据具体需求保留或删除。!! 示例 需求场景 在审批流程中使用选择器选择对应角色的审批状态,并将选择的结果展示在页面中,实现效果如下图所示。 ! 操作步骤 1. 创建如下枚举。! 2. 在页面中拖拽文本组件并将文本属性改为“选择人员审批”作为标识。在文本组件后拖拽枚举Status生成选择器,并点击展开选择器,删除自动生成的“全部”选项。! 3. 将选择器的文本字段和值字段都点击绑定为text。! 4. 在页面中创建String类型的局部变量select,并将选择器的选中值绑定为该变量。! 5. 开启选择器的“可多选”属性,“多选项展示形式”属性选择为过多时显示,“转换器”选择以','连接。 6. 拖拽文本组件至选择框后,并将文本属性绑定为select变量,帮助展示选择后呈现的效果。! 7. 点击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);>2024年01月09日</span> </div>","status":null,"version":"3.7","pageView":89,"useful":0,"useless":0,"replaceDateTime":"2024-03-27T07:42:53.000Z"}}