复选框|飞书低代码平台

复选框|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
适用场景
checkbox,以平铺选项的形式展示选项,用户可进行选择操作。
使用说明
区域
说明
示意图
内容区
  • 模式
  • 默认值
  • 多选框的默认值类型是array
  • 默认值会在组件初始化、重置、以及依赖的变量发生变化后生效
  • 拓展
  • 标题
250px|700px|reset
内容区示意图
250px|700px|reset
交互区
  • form data key
  • 表单内的输入类组件配置了「form data key」后,表单可获取到该组件的值。
比如,文本输入组件的「form data key」配置为"first_name",表单的data信息中会包含"first_name",并且其值为该文本输入组件的值,可以通过{ { form.data.first_name } }消费该组件的值
  • 同一个表单内有多个相同「form data key」时,均不会生效
  • 事件
  • 多选框只支持1种事件:「值改变时」
  • 校验
  • 校验时机:值改变时、表单提交时(如在表单内)
  • 校验内容:
  • 必填
  • 最多可选
  • 最少必选
  • 自定义校验规则
  • 可以通过js表达自定义校验规则
示例:{{self.value === 'test' ? 'error': ''} }
  • 只读
  • boolean类型
  • 禁用
  • boolean类型
  • 加载中
  • boolean类型
  • 隐藏
  • boolean类型,控制输入组件是否在页面上隐藏
250px|700px|reset
外观区
  • 选择方式
  • 多选器
250px|700px|reset
  • 卡片
250px|700px|reset
  • 排列方式
  • 垂直
  • 会以单列方式,竖向排列所有选项
  • 水平
  • 会横向排列选项,选项超出输入组件宽度会自动换行,单个选项最多占满一行
  • 多列
  • 可以设置成多列布局,可以定义排成几列,超出单列宽度的选项会折叠显示
250px|700px|reset
属性API
属性
类型
默认值
描述
label
object
{
textContent:"标题",
tooltipText:"",
wrapping:false,
layout:"top",
align:"left",
width:4,
unit:"col"
}
聚合标题相关的属性
聚合标题相关的属性,包含:
  1. 标题内容textContent
  1. 标题提示内容tooltipText
  1. 超出折行wrapping
  1. 标题文本对齐方式align
  1. 标题位置layout
  1. 标题宽度width
  1. 标题宽度单位unit
id
string
根据组件
组件ID
value
boolean | string | number
null
组件值(选项值)
如:'Option1'
formDataKey
string
自身id
值标识
disabled
boolean
false
是否禁用
hidden
boolean
false
是否隐藏
loading
boolean
false
是否显示加载中
rules
rule
根据组件
校验规则。必定包含「必填」和「自定义」校验。
具体规则和校验信息的数据结构由研发确定。
示例:
{
"required":false
"maxCount":3,
"minCount":2
}
validateStatus
string
success
校验状态(校验是否通过)
validationMessage
String
""
最近一次校验错误时显示的信息
invalid
boolean
false
校验是否失败
data
array
[]
选项的原始数据——注意,是选项的原始数据源
mode
'manual' | 'mapped'
manual
选项生成模式
options
array
[]
选项的数据——注意,是选项经过映射后的选项数据
selectedIndexs
array
null
已选项index
selectedLabels
array
[]
已选项的名称
selectedItems
array
[]
已选项的数据
方法API
方法
说明
setValue(value: boolean | string | number | void)
设置组件值
clearValue()
清空组件值
validate()
触发校验
clearValidation()
清空校验状态
reset()
重置组件值
setDisabled(disabled: boolean)
设置是否禁用
setLoading(loading:boolean)
设置是否加载中
setHidden(visible:boolean)
设置是否隐藏
setReadOnly(readOnly:boolean)
设置是否只读
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

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