Skip to content

变量绑定(数据绑定)

变量绑定把组件的某个属性(如占位文案、是否禁用、选项数据)接到可变数据源上。源数据变化时,属性会同步更新,适合默认值、登录态、远程选项、动态禁用等场景。

界面名称多为 数据绑定

数据绑定入口

在哪里找

  1. 选中组件 → 右侧 属性配置
  2. 点击 数据绑定(「设置变量」类入口,以界面为准)。
  3. 在弹窗左侧配置「属性 = 绑定内容」,右侧从变量树点选插入。

也可在部分属性旁的变量图标中,直接插入单个变量。

数据绑定弹窗

全局变量的关系:全局变量是「可复用的数据资产」;本文是「把变量接到某个组件属性上」。

绑定模式

每一行绑定通常包含:

说明
属性要驱动的配置项(预设项或自定义键名)
模式变量:直接引用;计算:用函数算出结果
值 / 表达式变量路径,或计算逻辑

变量模式

从右侧变量树点选,或手写路径。常见写法(以界面与环境为准):

写法示意含义
{{$form.userName}}当前表单某字段值
{{$cookie.token}}Cookie 中的 token
{{$localStorage.theme}}本地存储
{{$sessionStorage.draftId}}会话存储
{{$globalData.merchant}}环境注入的全局数据
{{$var.某全局变量名}}全局变量
{{cityOptions}}环境写入的外部变量名

对象可继续取属性,例如 {{$var.user.deptName}};数组可用下标(以编辑器支持为准)。

变量模式一行

计算模式

需要加工后再赋给属性时,选「计算」,在编辑器中读取其它变量后返回结果。概念示例:

text
读取单价与数量,返回金额
单价 = 读取表单.price(空则 0)
数量 = 读取表单.count(空则 0)
返回 单价 × 数量

具体函数写法以编辑器模板为准。字段值计算更常用计算公式组件或字段公式。

计算模式

自定义属性键名

除预设属性外,可添加自定义绑定。绑到组件属性时,键名建议按界面提示的规则,例如:

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

自定义键名提示

变量树里有什么

分类含义典型用途
当前表单本表各字段值用 A 字段驱动 B 的属性
Cookie浏览器 Cookietoken、语言等
localStorage / sessionStorage本地 / 会话存储主题、草稿 ID
全局数据环境注入的共享数据商户信息、字典
全局变量全局变量中定义的计算 / 固定值申请人、开关位
其它外部变量环境写入的自定义名如选项列表 cityOptions

先有数据,再绑定

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

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

怎么配置(分步)

  1. 明确:「哪个属性」要随「什么数据」变。
  2. 打开数据绑定 → 选预设属性,或添加自定义键。
  3. 选变量模式并点选路径;需要加工则用计算模式。
  4. 保存后预览:改源数据,看目标属性是否更新。

业务示例

入门:占位文案随语言变量变

属性:占位文本。 绑定:语言相关变量(或配合国际化词条策略)。 切换语言相关数据后,占位同步变化。

入门:选项绑定城市列表

单选 / 下拉的选项数据 ← 外部变量 cityOptions(环境预先写入)。 比在每个字段里维护静态选项更易集中更新。也可配合全局数据源选项数据

常用:请求头带 token

远程选项或全局数据源请求参数中使用 {{$cookie.token}} 或全局变量中的 token。 与组件属性绑定是同一套变量体系。

常用:按角色变量禁用字段

全局变量或外部数据给出「是否可编辑金额」。 自定义绑定禁用属性 = 计算:无编辑权则为禁用。 更标准的权限判断见身份与权限

常用:用表单字段驱动另一字段属性

$form.userType 变化时,通过绑定或计算更新说明字段的占位 / 是否清除等。 若目标是「改字段的值」,优先数据联动;本文侧重「改组件属性」。

常用:事件写入变量,属性再绑定

行为动作「发送请求」把结果存到变量 → 统计栏或下拉选项绑定该变量,实现「查完再展示」。

和其它能力怎么选

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

注意点

  • 变量路径、大小写需与环境注入一致;不确定时先在变量树点选。
  • 计算模式避免循环依赖(A 依赖 B、B 又依赖 A)。
  • 敏感信息勿仅靠前端变量做唯一安全控制,权限判断需配合服务端。
  • 选项绑定后仍要预览空数据、错误数据两种情况。

相关阅读

相关技术文档