数据绑定

数据绑定把当前组件的某个属性（占位文案、是否禁用、选项数据等）接到可变数据源上。源数据变化时，属性会同步更新。

界面按钮与弹窗标题均为 数据绑定（旧称「变量绑定」，文档与侧栏已统一为现名）。

在哪里找

选中组件 → 右侧 组件配置 → 属性配置 → 标题旁点 数据绑定。

与全局变量的关系：全局变量是可复用的数据资产；本文是把已有变量（或计算结果）接到某个组件属性上。属性配置总览见属性配置。

怎么用（分步）

下面以输入框「姓名」为例。

1. 打开 数据绑定 弹窗：左侧是 属性列表（要绑哪些属性），右侧是 变量列表（点选插入）。

2. 点 添加，从下拉里选预设属性（如 输入框占位文本），或选 自定义 手写键名。

3. 每一行结构是：属性 = 模式 + 值。

4. 模式选 变量（直接引用）或 计算（加工后再赋）。

5. 变量模式下，在右侧变量列表点选；路径会出现在左侧绑定值框中（也可用 {{变量路径}} 手写）。

6. 选 自定义 时，键名按弹窗内 自定义键名规则 填写，例如 props.placeholder、props.disabled。

7. 需要加工时，模式改成 计算，再点 设置计算（打开的编辑窗标题多为 编辑数据）。

8. 点 确定 保存，预览时改源数据，看目标属性是否跟着变。

推荐顺序

先确认变量在预览/运行时已有值 → 再绑属性。空引用会导致属性不生效或表现异常。

绑定模式说明

项	说明
属性	要驱动的配置项（预设项，或自定义 props.xxx）
模式	变量：直接引用；计算：用编辑器算出结果后再赋
值 / 表达式	变量路径，或计算逻辑

变量模式

从右侧变量树点选，或手写路径。常见前缀（以界面与环境为准）：

示意	含义
$topForm / 当前表单字段	本表其它字段的值
$cookie	Cookie（如 token）
$localStorage / $sessionStorage	本地 / 会话存储
$globalData	环境注入的全局数据
$var	全局变量
$t	国际化词条
$isDesigner	是否在设计器预览环境

对象可继续取属性，例如 $var.user.deptName；写法以点选插入为准。

计算模式

模式选 计算 → 设置计算。在编辑器里读取其它变量并返回结果，再赋给左侧属性。具体函数与模板以编辑器为准。

若目标是算出字段填写值（如金额），更常用计算公式或数据联动；本文侧重改组件属性。

自定义属性键名

除预设属性外，可添加 自定义。绑到组件 props 时：

props.placeholder   → 占位文本
props.disabled      → 是否禁用
props.clearable     → 是否可清除

变量列表里有什么

分类	含义	典型用途
当前表单	本表各字段值	用 A 字段驱动 B 的属性
Cookie	浏览器 Cookie	token、语言等
localStorage / sessionStorage	本地 / 会话存储	主题、草稿 ID
全局数据	环境注入的共享数据	商户信息、字典
全局变量	全局变量	申请人、开关位
国际化配置	$t 词条	多语言占位、标题
其它外部变量	环境写入的自定义名	如集中维护的选项列表

远程请求参数里也可使用同一套 {{变量}} 写法，见全局数据源。

场景示例

入门：用变量驱动占位文案

背景：访客登记「姓名」的占位不要写死，希望跟某个变量走（演示用 cookie / 全局变量 / 国际化均可）。

步骤：

1. 选中「姓名」→ 数据绑定 → 添加 → 输入框占位文本 → 模式保持 变量 → 右侧点选变量（或手写路径）→ 确定。

预期：变量有值时，占位随变量更新。多语言场景可改绑 $t 词条，见国际化。

常用：计算后再赋给属性

背景：某个属性不能直接引用变量，需要先用多个值算出结果（例如综合单价、数量、折扣后再决定展示相关属性）。

步骤：

1. 打开数据绑定，添加目标属性（如 是否禁用），模式选 计算，点 设置计算，在 编辑数据 中配置读取与返回逻辑后确定。

预期：计算有结果后，该属性按返回值更新。字段金额本身优先用计算公式；按角色锁编辑也可看身份与权限、禁用条件。

常用：全局变量算出选项，再绑定到下拉

背景：请假类型的选项希望集中维护（甚至可按其它字段动态计算），多个表单共用同一套。做法是：在全局变量里用计算返回选项数组，再在选择器上用 数据绑定 接到 选项数据。

步骤：

1. 左侧功能栏打开全局配置 → 设置变量 → 创建变量（标签如「请假类型选项」）。

2. 点选该变量，在右侧编辑器配置计算：返回 { label, value } 组成的数组（也可按表单其它字段分支返回不同选项；编辑器内有占位示例可参考），保存。

3. 回到表单，选中下拉（如「请假类型」）→ 数据绑定 → 添加 → 选项数据 → 模式保持 变量 → 右侧展开 全局变量（$var） 点选刚建的变量 → 确定。

4. 预览打开「请假类型」下拉，应看到计算返回的选项（如年假 / 事假 / 病假）。

预期：改全局变量里的计算逻辑并保存后，所有绑定了该变量的选择器选项一起更新。静态死选项、或纯接口选项仍见选项数据、全局数据源。

常用：选项接到集中维护的数据

单选 / 下拉的 选项数据 也可接到外部变量或全局数据源。若选项要由计算生成，见上一节「全局变量算出选项」。静态 / 远程配置见选项数据。

常用：事件写入变量，属性再绑定

事件流配置里「发送请求」把结果存到变量 → 再用数据绑定接到选项或其它属性，实现「查完再展示」。

和其它能力怎么选

诉求	优先
改组件属性（占位、禁用、选项…）	数据绑定（本文）
改字段填写值	数据联动 / 事件设值
可复用的共享计算	全局变量
可复用的选项集	全局数据源
按权限显隐必填	身份与权限 + 条件
算出展示用金额字段	计算公式

注意点

• 界面名称是 数据绑定；旧文档里的「变量绑定」指的是同一功能。
• 变量路径、大小写需与环境一致；不确定时先在变量列表点选。
• 计算模式避免循环依赖（A 依赖 B、B 又依赖 A）。
• 敏感信息勿仅靠前端变量做唯一安全控制，权限判断需配合服务端。
• 选项绑定后仍要预览空数据、错误数据两种情况。
• 自定义键绑 props 时按 props.<属性名> 填写。

相关阅读

• 属性配置
• 全局变量
• 全局数据源
• 数据联动
• 身份与权限
• 事件流配置
• 国际化

相关技术文档

• 变量
• 预定义全局数据
• 操作全局数据