表单-桌面端|飞书低代码平台

表单-桌面端|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
适用场景
form,快捷实现表单数据的提交与展示场景。
使用说明
区域
说明
示意图
内容区
  • 初始值
  • 表单的值类型是个object,其结构由各输入组件的「form data key」构成
比如,表单中放入了两个文本输入组件,他们的「form data key」分别配置为 textInput1,和textInput2,输入的值分别为 "a" 和 "b", 则表单的值为:
{
"textInput1":"a",
"textInput2":"b"
}
同一个表单下有多个相同的「form data key」,则均不会生效
  • 初始值为表单渲染时的值,可以定义表单的初始状态
  • 结构
  • 定义表单的结构,包括顶部区、内容区和底部区,其中内容区不允许删除
内容区示意图
250px|700px|reset
image.png
交互区
  • form data key
  • 表单内的输入类组件配置了「form data key」后,表单可获取到该组件的值。
比如,文本输入组件的「form data key」配置为"first_name",表单的data信息中会包含"first_name",并且其值为该文本输入组件的值,可以通过{{ form.data.first_name }}消费该组件的值
  • 同一个表单内有多个相同「form data key」时,均不会生效
  • 事件
  • 表单支持2种事件:「提交时」、「校验失败时」
  • 只读
  • boolean类型
  • 若表单的禁用为true时,该表单内所有输入组件都处在只读状态
  • 禁用
  • boolean类型
  • 若表单的禁用为true时,该表单内所有输入组件都处在禁用状态
  • 加载中
  • boolean类型
  • 表单会处于加载中状态,输入组件的loading属性不会随着改变
250px|700px|reset
image.png
外观区
  • 位置类型
  • 默认
  • 相对
  • 绝对
  • 固定
  • 粘性
  • 隐藏
  • boolean类型,控制输入组件是否在页面上隐藏
250px|700px|reset
image.png
配置方式
快速搭建
截图
说明
250px|700px|reset
Step1: 拖入一个表单组件,点击 表单生成器
250px|700px|reset
Step2:选择对象,并勾选字段,选择字段对应的输入组件,以及组件是否必填
250px|700px|reset
Step3:点击 生成表单,一键完成表单配置
  • 会根据勾选的字段及设置的输入组件类型,自动生成输入组件
  • 输入组件的「form data key」会被设置为字段的 apiName
  • 会自动生成一条创建对象记录的数据请求,实现通过表单新增数据的场景
0 到 1 搭建
截图
说明
250px|700px|reset
Step1: 拖入一个表单组件,拖入组件至表单的内容区
250px|700px|reset
Step2:定义输入组件「form data key」
  • 表单内的输入类组件配置了「form data key」后,表单可获取到该组件的值。
比如,文本输入组件的「form data key」配置为"first_name",表单的 data 信息中会包含"first_name”,并且其值为该文本输入组件的值,可以通过{ { form.data.first_name } }消费该组件的值。
  • 输入组件的「form data key」默认为{ { self.id } }(组件 id),可以自定义
组件的 name 属性会修改为 id
表单的数据是由其内容区输入组件的「form data key」和 value 组成
  • 同一个表单内有多个相同「form data key」时,均不会生效
250px|700px|reset
Step3:定义表单提交事件
  • 表单的按钮默认会配置点击时事件:与组件交互-表单-提交,需要在表单上配置提交时的事件
属性API
属性
类型
默认值
描述
submitting
boolean
false
是否正在提交中
invalidFields
array
[]
校验不通过的输入组件列表
invaild
boolean
false
校验是否失败
disabled
boolean
false
是否禁用
readOnly
boolean
false
是否只读
loading
boolean
false
是否显示加载中
showHeader
boolean
true
是否显示标题区
showBody
boolean
true
是否显示内容区
showFooter
boolean
true
是否显示底部区
hidden
boolean
false
是否显示
方法 API
方法
说明
setData(data:object)
设置表单值
submit()
提交
validate()
触发校验
clearValidation()
清空校验状态
clear()
清空表单值
reset()
重置表单为初始值
setDisabled(disabled: boolean)
设置是否禁用
setLoading(loading:boolean)
设置是否加载中
setHidden(visible:boolean)
设置是否隐藏
setReadOnly(readOnly:boolean)
设置是否只读
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
表单-桌面端|飞书低代码平台
先进生产力和业务协同平台
联系我们立即试用
联系我们立即试用