Skip to content

数据定义

数据定义是低代码平台实现数据驱动页面渲染的核心机制,用于定义数据结构、来源及绑定逻辑。通过为组件属性标记可绑定标识,将其与数据定义属性关联,支持本地定义、远程API、引用及动态绑定等场景,涵盖七种数据类型,实现视图与数据状态的实时同步及运行时逻辑处理。

视频教程

TBD

类型说明

字段名类型必填说明
_vidstring数据定义唯一ID(系统生成)
_varstring数据定义变量名(用于代码中引用,需全局唯一)
_typeWidgetDataDefineType数据定义类型
namestring数据定义名称(用于界面显示)
scopeWidgetDataDefeinScope数据作用域(global/self-children/children
propDefinesWidgetDataDefinePropDefine[]数据属性定义(结构化数据描述)
jsonDatastring数据JSON示例(远程数据时为示例,本地数据为实际值)
refBindWidgetPropDefineBind引用/绑定数据源(仅ref/bind类型使用)
requestUrlModeRequestUrlModeTypeAPI地址模式(project/base
requestUrlstringAPI请求地址(remote/submit类型必填)
requestMethodWidgetDataDefineRequestMethod请求方法(get/post等,默认get
isAutoLoadboolean是否自动加载数据(默认true
jsonDataPathstring响应数据路径(如$.data.list
onSuccessDesignerEditorEvalFunction数据加载成功回调函数
onErrorDesignerEditorEvalFunction数据加载失败回调函数

1. 定义数据(def

  • 作用:本地定义结构化数据,作为其他组件的数据源
  • 典型场景:定义页面基础数据结构, 如图片地址等,用户点击按钮后在按钮绑定的可执行函数中修改图片地址
  • 关键配置propDefines(数据结构)、jsonData(默认数据)

2. 远程数据(remote

  • 作用:通过API请求加载远程数据,支持自动/手动加载
  • 典型场景:从后端接口获取实时数据(如商品列表、用户列表)
  • 关键配置requestUrl(API地址)、requestMethod(请求方法)、propDefines(数据结构)、jsonData(示例数据)

3. 引用数据(ref

  • 作用:引用其他的数据定义,组合加工形成新的数据定义(仅限作用域内)
  • 典型场景:后端接口返回数据结构与前端数据结构不一致时,使用引用数据定义,或多个接口返回数据需要进行数据处理时,使用引用数据定义
  • 关键配置refBind(引用数据源)、propDefines(数据结构)、jsonData(示例数据)

4. 提交数据(submit

  • 作用:通过API请求提交数据到后端
  • 典型场景:表单提交(如新增、修改)
  • 关键配置requestUrl(提交地址)、requestMethod(POST请求)、requestBody(POST请求)

5. 绑定数据(bind

  • 作用:组件属性绑定配置,可绑定组件属性绑定时自动定义
  • 典型场景:表单组件与数据定义双向同步
  • 关键配置refBind(绑定数据源)

6. 运行时数据(runtime

  • 作用:组件运行时,动态生成的数据。
  • 典型场景:vfor组件,for循环执行时生成的循环项定义
  • 关键配置propDefines(数据结构)、jsonData(示例数据)

7. 常量数据(const

  • 作用::组件运行时,产生的常量数据定义(通常用户不可修改)
  • 典型场景:表单组件产生的表单数据,引用数据组件产生的 页面 Params 参数路由 Query 参数路由 Params 参数等。
  • 关键配置propDefines(常量结构)、jsonData(示例数据)