自定义/动态选项

本文说明如何为单选框、复选框、下拉框、级联选择器等组件配置静态选项与动态选项（联动生成）。

选项数据结构

所有选项都遵循「标题 + 值」结构，部分组件支持额外字段。

json

{
  "label": "标题",
  "value": "值内容",
  "disabled": false,
  "border": false,
  "children": []
}

label：展示给用户的标题（必填）
value：提交/存储的值（必填）
disabled：是否禁用该选项（可选，布尔值）
border：是否显示边框（可选，布尔值；仅单选框/复选框有效）
children：子选项数组（可选；仅级联选择器有效，结构与父级一致）

简单选项

一般来说，静态选项可直接通过 选项 属性进行配置：

第一个输入框：填写 value
第二个输入框：填写 label

当需要禁用某一项、或为级联选项设置多级结构时，建议切换到专业模式，以 JSON 结构配置更清晰。

动态选项

当选项需要根据某种条件（例如：其它字段、用户信息、页面上下文）动态生成时，可使用 选项(函) 属性进行配置。

该配置本质上是在编写一个 JavaScript 函数，用于返回选项数组。函数通常可以读取：

表单模型 formModel：当前表单各字段值（用于联动）
上下文 excontext：页面/业务上下文（不同项目的字段由系统注入）

示例（根据 formModel.type 返回不同选项）：

// 返回值必须是 Array<{ label, value, ... }>
return (formModel?.type === 'fruit'
  ? [
      { label: '苹果', value: 'apple' },
      { label: '香蕉', value: 'banana', disabled: true }
    ]
  : [
      { label: '红色', value: 'red' },
      { label: '蓝色', value: 'blue' }
    ]
);

示例（级联选择器返回树形 children）：

return [
  {
    label: '浙江',
    value: 'zj',
    children: [
      { label: '杭州', value: 'hz' },
      { label: '宁波', value: 'nb' }
    ]
  }
];

由于需要编写 JavaScript 逻辑，通常建议由具备前端开发经验的人员完成该配置。

注意事项

选项(函) 的返回值应为数组，数组元素为 { label, value, ... }；级联选择器需包含 children 形成树结构。
建议仅“计算并返回选项”，避免在函数内直接修改 formModel 等外部状态，以免产生难以排查的联动问题。

如何验证是否生效？

选项会在表单初始化或联动条件变化时刷新。验证建议：

点击设计器顶部的 「运行」→「重置填写」
检查对应组件的选项展示/禁用状态是否符合预期

自定义/动态选项 ​

选项数据结构 ​

简单选项 ​

动态选项 ​