Data

功能描述

假设有如下配置：

{
  "component": "Data",
  "componentProps": {
    "alias": "requestData",
    "setToFormData": {
      "merge": false
    },
    "dataSource": {
      "token": "apply-form",
      "pbcToken": "todo-list-prepare"
    },
    "dataResponseKeyPath": "results[0]"
  }
}

假设上述配置示例里返回的数据是:

{
  "id": 12345,
  "name": "A name text",
  "description": "Some description text"
}

那么在 Data 组件的所有子组件中的支持 Variable Pattern 语法的属性，可以通过 :name 和 :description 来调用这两个数据，例如 Text 组件的 content 属性。
如果想在 input 类型的组件 例如 Input、 DatePicker、Textarea、NumberPcker 等组件中使用这些数据，需要通过 setToFormData 属性来将数据放进表单数据中，这样才能在 input 型组件 中使用这些数据，并且会随着表单提交时将这些数据一并提交。如上述示例配置。
如果想在 Data 组件的子组件以外的地方访问这些数据，但是又不需要数据随着表单提交一起提交，可以通过 alias 属性来将数据放进 context 下，如上述示例配置。则 Data 组件的子组件以外的地方都可以通过 :context.dataSource.requestData.name 和 :context.dataSource.requestData.description 来调用这两个数据。

容器属性

所有组件配置的第一层均支持容器属性

组件属性 componentsProps

Name	Type	Default	是否支持 Variable Pattern	Description
className	string		✔️	Root div 的 className
alias	string \| object			将数据源的返回数据作为 context.dataSource 的某属性，页面组件可以通过 :context.dataSource.xxx 来调用
setToFormData	string			将数据源的返回值放进去表单数据，默认替换所有表单数据，可以通过 merge 来合并
intervalTime	number			自上一次请求后间隔多久再次请求刷新数据，单位毫秒
renderWhileLoading	bool	false		loading时也渲染子元素
dataSource	`{ token: string, pbcToken: string, listUrl: string }`			数据源
dataUrl	ConditionalListOrSinglePropertyPropType(string)			通过 `dataUrl` 获取数据。
dataFilters	ConditionalListPropertyPropType(DataFilters)		✔️	请求数据源隐藏的固定 filter 条件，无法通过界面进行改变
sortModel	`Array<SortModel>`			数据的排序方式
dataResponseKeyPath	string			取 response data 里的某一个子数据来作为结果。
transformDataResponse	string			转换取到的数据，使用 eval 表达式，this 指向获取到的数据。
translateDataResponse	bool	true		是否需要翻译请求结果
debounceTime	number	200		请求数据的 debounce time，会触发 leading。
defaultValue	object			数据源的默认数据，会和 api 请求到的数据进行 merge。如果 api 请求返回的是数组，则和数组的每一项进行 merge。如果 api 请求返回的是个对象，则和此对象进行 merge。
httpMethod	'get' \| 'post'	'get'		数据请求的http方法。
selectColId	`Array<string>`			加载的数据字段，不配置则加载所有字段。
multiDataSource	array			多数据源，并发请求。数组内容支持前面所有单数据源配置，例如 `dataSourde`, `sortModel`, `dataResponseKeyPath` 等
multiDataSourceFlat	bool	false		If true, 将多数据与中每个数据源的 data flatten 成一个数组。
LoadingProps	LoadingProps			传给 Loading 组件的属性

所有其余 componentsProps 将会被传给组件根元素（div）。

SortModel

Name	Type	Default	Description
colId	string		排序字段 id
sort	'asc' \| 'desc'	'asc'	生序或者降序排序
sortType	'text' \| 'number' \| 'date'	'text'	值按照什么类型进行排序

LoadingProps

Name	Type	Default	Description
size	number	20	loading 元素大小，默认 20px
centered	bool	true	是否居中显示
overlay	bool	false	是否显示半透明遮罩层
delayed	bool	false	是否延迟显示
delayTime	number	800	延迟时间（ms）

JS API

通过 formApi.getFieldApi() 获取的接口如下：

Name	Type	Description
node	HTML Element	组件的根 DOM 元素
on	func	绑定到组件的事件
getData	func	获取数据
refresh	func	刷新数据

on eventType

Name	callback	Description
dataFetched	(formApi) => any	当获取数据成功时候触发
childrenFirstRendered	(formApi) => void	当子元素第一次渲染的时候触发

功能描述​

容器属性​

组件属性 componentsProps​

SortModel​

LoadingProps​

JS API​

on eventType​

功能描述

容器属性

组件属性 componentsProps

SortModel

LoadingProps

JS API

on eventType