Skip to content

选项数据 ​

选项数据决定单选、多选、下拉等组件里「能选什么」。在 属性配置 → 选项数据 里可选来源:

  • 静态数据(表格逐条维护 label / value)
  • 文本录入(一行一个选项,适合快速粘贴)
  • JSON数据(整段 JSON 数组编辑)
  • 远程数据
  • 全局数据源
  • 业务数据(选用系统已接入的业务字典,如性别、部门)

选项也可用数据绑定接到全局变量(适合计算生成的选项列表)。

树形选择、级联选择器 等树形组件的静态录入界面不同:支持 添加子级,可无限嵌套(见下文)。

在哪里找 ​

选中选项类组件 → 右侧 组件配置 → 属性配置 → 选项数据。

来源怎么选 ​

来源适合不适合
静态数据性别、是否、短商品列表等少而稳成百上千且常变的主数据
文本录入从别处复制一串选项、快速试填需要精细改每个 value、或深层树结构
JSON数据已有标准 {label,value}(树可带 children)数组不熟悉 JSON 的日常维护
全局数据源多表单共用省份、费用类型、币种只在一个字段用一次(可静态)
远程数据员工、商品库、组织树等接口数据完全固定的两三个选项
业务数据性别、部门、组织树等系统已维护的业务字典环境未接入业务字典时(菜单里看不到此项)

怎么用(静态选项) ​

下面以「费用报销」里的「商品」下拉为例。

  1. 选中选择器,找到 选项数据。

选项数据入口

  1. 点开下拉,选择来源:静态数据 / 文本录入 / JSON数据 / 远程数据 / 全局数据源 / 业务数据。

选项来源菜单

  1. 选 静态数据 后,在下方表格维护 label(显示文字)与 value(提交值),可点 添加;需要时可勾选 键值对。

静态选项 label value 列表

  1. 按需打开 是否可搜索、是否可以清空选项(文案以面板为准)。

可搜索与可清空

值与显示

提交给系统的是 value,用户看见的是 label。历史已填数据按 value 存储时,慎改 value。

文本录入 ​

适合从文档、表格里一次性粘贴一批选项。

  1. 选项数据 选 文本录入,右侧出现 编辑文本。

选项数据选文本录入并点编辑文本

  1. 点 编辑文本,在弹窗里填写或粘贴,确定后生效。

编辑文本弹窗

普通组件(下拉 / 单选等) ​

一行一个选项,不要缩进。弹窗占位示例类似:

text
选项1
选项2
选项3

每一行的文字会同时作为显示名(label)和提交值(value)。若要单独改 value,可再切回 静态数据 微调。

树形 / 级联组件 ​

树形选择、级联选择器 等开启文本录入时,用行首空格表示层级(设计器会把 Tab 当成空格):

  • 顶层:行首不要空格
  • 下一级:比父级多 1 个空格
  • 可继续加深,每一级只多 1 个空格(不要一次跳很多空格)

示例(华东 → 上海 → 浦东新区):

text
华东
 上海
  浦东新区
  徐汇区
 杭州
华北
 北京
  朝阳区

树形文本录入:空格缩进表示层级

TIP

树形文本录入同样是「行内文字 = label = value」。需要不同提交值时,可先用文本快速搭树,再切 静态数据 改各节点的 value,或改用 JSON数据(带 children)。

JSON数据 ​

适合手里已有选项 JSON,或需要和开发约定的数组结构对齐。普通选项为 { "label", "value" } 对象数组;树形还可在节点上带 children。

  1. 选项数据 选 JSON数据,右侧出现 编辑数据。

选项数据选JSON数据并点编辑数据

  1. 点 编辑数据,在弹窗里编辑 JSON 数组,确定后生效。

编辑数据弹窗

TIP

JSON 写错会导致选项出不来。不确定时先用 静态数据 配好,再切到 JSON数据 对照格式。

树形 / 级联的静态选项 ​

树形选择、级联选择器 等组件选 静态数据 时,不是普通的扁平行表格,而是 树形选项 面板:

  • 添加同级:在当前层增加一项
  • 添加子级:在该项下增加子节点,可继续嵌套,支持无限层级

组织架构、省市区、分类目录等需要多级时,用这类组件并在此维护,比在普通下拉里手搓三级更合适。

树形静态选项:添加同级与添加子级

文本录入、JSON 同样可用于树形组件:文本侧用行首空格表示层级(见上文「文本录入 → 树形 / 级联」);JSON 侧用 children 嵌套。

远程数据 ​

选项要从接口拉取时,把 选项数据 选成 远程数据,再点 编辑请求 打开配置弹窗。弹窗标题为 远程数据,内含四个页签:请求配置、前置处理、数据处理、错误处理。

1. 选远程并打开编辑请求 ​

  1. 选中下拉 / 单选等选项类字段 → 属性配置 → 选项数据 选 远程数据。
  2. 下方出现 编辑请求,点开进入配置。

选项数据选远程数据并点编辑请求

2. 请求配置 ​

请求配置 页填写接口本身:

项作用(界面文案)
请求链接接口地址(必填)
请求方式GET / POST
数据类型请求体类型:JSON / FormData(多为 POST 时用)
请求头部键值表,如鉴权头
请求参数GET 参数,经 URL 传递
附带数据POST 等通过请求体传递的键值

顶部有一段说明:定义请求时可用双大括号(如 {{token}})引用变量;值为对象时可用 {{变量名.属性名}}。

请求链接与请求方式

请求头部、请求参数、附带数据 都是「键名 / 值」表格,可点 添加 增行。一般:鉴权放头部,筛选条件放请求参数,POST 正文放附带数据。

请求头部、请求参数与附带数据

TIP

不必三个表都填满。只配链接的 GET、或「链接 + 头部 Token」也很常见。改完用下方 测试请求 核对,再点弹窗 确定。

3. 使用变量 ​

请求链接右侧(以及头部 / 参数 / 附带数据的值)可用 变量 图标插入;也可手写 {{token}}、{{$var.xxx}} 等。发请求时设计器会读这些变量(Cookie、localStorage、全局变量等)。更完整的绑定说明见数据绑定。

请求中使用变量

4. 预览响应数据 ​

同一页下方是 预览响应数据:点 测试请求 发起一次试调,成功或失败会显示在预览区(空态提示为:点击「测试请求」按钮预览响应数据)。

预览响应数据与测试请求

TIP

测试失败时先查链接、跨域与鉴权变量是否有值;通过后再做「数据处理」把响应转成选项。

5. 前置处理 ​

切到 前置处理,可写发送前脚本(形如 function beforeFetch(config, data) { ... }):改请求头 / 参数,或返回 false 终止请求。占位示例常见为给 config.headers 补 Authorization 后 return config。

前置处理脚本

6. 数据处理 ​

切到 数据处理,把接口返回转成选项数组(形如 function parse(res, rule, api) { ... })。通常 return 带 label / value 的对象数组,例如从 res.data 映射 name→label、id→value。

数据处理脚本

7. 错误处理 ​

错误处理 页可写请求失败时的脚本(参数多为错误对象 e)。需要统一提示、埋点时再配;多数场景先保证 测试请求 成功、数据处理 返回正确选项即可。

和「远程搜索」的区别

属性里还有 其中的选项是否从服务器远程加载 等,那是输入关键字时再搜,和「选项数据 = 远程数据」整表拉取不是同一套配置。

全局数据源 ​

  1. 打开全局配置 → 设置数据源,创建可复用的选项集(如省份列表、紧急程度)。

设置数据源维护选项集

  1. 回到组件,把 选项数据 选成 全局数据源,再按界面指定具体数据源(维护方式见全局数据源)。

组件选项选全局数据源

业务数据 ​

业务数据 用来选用系统已经接入的业务字典(如性别、部门、省市区),不必在表单里手填选项,也不必为每个字段单独配远程请求。列表由实施/开发在设计器配置里接入;配置人员只需在面板里挑选。

看不到「业务数据」?

选项来源菜单里没有 业务数据,通常表示当前环境尚未接入业务字典。占位提示类似「请在 config.datasets 中配置」时,请联系实施或开发完成接入,而不是在本页手写 JSON。

下面以「请假申请」里的「所属部门」为例。

1. 选业务数据 ​

  1. 选中选择器 → 属性配置 → 选项数据,点开下拉。
  2. 选择 业务数据。

选项来源选业务数据

2. 挑选具体字典 ​

选成 业务数据 后,下方出现业务数据选择框(占位多为 请选择业务数据),右侧有刷新图标。

请选择业务数据

  1. 点开选择框,按分组浏览(演示环境常见 选项类、树级选择 等)。
  2. 展开分组后点具体项,例如 性别、部门。

业务数据字典列表

3. 按需填写附加配置 ​

部分字典会带出额外表单项。例如选 部门 后可能出现 包含停用部门 开关:打开则选项里会多出已停用的部门。

部门附加配置

改完附加项后,可用右侧刷新图标重新加载选项。

4. 看画布效果 ​

配置生效后,画布上该字段的下拉会显示业务数据返回的选项(如下面的部门列表)。

业务数据加载的部门选项

和「全局数据源」「远程数据」的区别

  • 业务数据:选系统已接入的字典,一般不用写请求地址。
  • 全局数据源:在设计器全局配置 → 设置数据源 里自己维护,多表单共用。
  • 远程数据:为本字段单独配置接口请求(见上文)。

场景示例 ​

入门:报销商品用静态选项 ​

背景:费用报销「商品」只有少数固定项,随表单一起发布即可。

步骤:

  1. 按上文配好静态 label/value 后,点 预览,打开「商品」下拉核对。

预览商品静态选项

预期:能看到全部静态项。改 value 前确认是否影响历史单据。

常用:多表共用全局选项集 ​

背景:地址类表单的省份、紧急程度要多处一致,希望改一处全局生效。

步骤:

  1. 在全局 设置数据源 维护好数据集后,选中字段,将 选项数据 设为 全局数据源。

选项数据使用全局数据源

预期:预览选项与全局源一致;改全局源后,所有引用该源的表单一起更新。发布前与业务确认影响范围。

常用:选项由全局变量计算 ​

请假类型等选项若要按规则计算生成,可在全局变量里返回选项数组,再数据绑定到 选项数据(见该文「全局变量算出选项」示例)。

常用:商品远程 + 单价回填 ​

商品走远程选项后,选中项可用数据联动回填单价等字段。

常用:请假类型静态 + 病假证明显隐 ​

请假类型用静态选项;选「病假」时再显示并必填证明——见隐藏条件、必填条件。

常用:所属部门用业务数据 ​

背景:请假、入职等表单的「所属部门」要跟组织人事系统一致,不要在每个表里抄一份部门列表。

步骤:

  1. 选中「所属部门」选择器,将 选项数据 设为 业务数据。
  2. 在业务数据树里选 部门;需要停用部门时打开 包含停用部门。

打开包含停用部门后的选项

预期:下拉出现研发部、市场部、财务部等(以当前环境接入的数据为准);打开 包含停用部门 后还会多出已停用项。改组织人事源后,引用同一业务数据的字段一起更新。

注意点 ​

  • 先定 value 的稳定性,再写 label。
  • 远程失败要有空态/提示(可看 选项为空时显示的文字),避免用户以为没选项。
  • 使用 业务数据 时:列表与附加项以当前环境接入为准;看不到该项或选择框提示未配置时,联系实施/开发,不要改成手写静态凑数(除非业务明确允许)。
  • 点刷新可重新拉取业务数据;附加配置(如包含停用部门)变更后建议刷新一次再预览。
  • 编辑请求 里改完先 测试请求,再写 数据处理;{{变量}} 在预览环境也要有值,否则头部鉴权会失败。
  • 请求参数 走 URL,附带数据 走请求体;GET 为主时优先配请求参数。
  • 改全局源会影响所有引用表单,发布前沟通。
  • 预览验证选项是否完整、默认值是否仍有效。
  • 多级分类、组织树请用 树形选择 / 级联选择器,在静态树面板用 添加子级 维护;普通扁平行表格不适合深层级。
  • 文本录入、JSON数据 改完后务必预览;JSON 格式错误时选项可能为空。
  • 树形文本录入:每深一级只多 1 个空格;层级跳级或空格不齐时,子项可能挂错父级。

相关阅读 ​

相关技术文档 ​