Skip to content

基础组件

基础组件用于表单字段的输入与展示,覆盖常见场景。对于大多数业务表单来说,首轮搭建通常都从这一组开始,再根据场景逐步叠加联动、校验、样式和高级逻辑。

基础组件

输入框

说明:单行文本输入,适用于简短信息(如用户名、邮箱)

用法:绑定变量,支持输入验证(如必填、长度限制);实际配置时,通常会继续配合属性配置验证配置事件配置使用。

多行输入框

说明:多行文本输入,适用于长文本(如备注、描述)

用法:支持自动换行、高度自适应或固定高度

密码输入框

说明:输入时隐藏字符(显示为圆点),适用于密码等敏感信息

用法:绑定变量,支持密码强度校验

提及

说明:输入时支持@用户或#标签,触发关联内容(如用户列表、话题列表)

用法:常用于社交平台、评论系统,绑定数据源实现动态提示

分段控制器

说明:单选切换按钮组,适用于选项较少的场景(如性别、状态)

用法:绑定变量,点击切换选项值

数字输入框

说明:仅允许输入数字,支持小数点或整数限制,支持设置最大值、最小值等边界值限制

用法:绑定数值变量,支持加减按钮或键盘输入

单选框

单选按钮,适用于互斥选项(如是否同意协议)

用法:绑定变量,点击选中唯一选项

多选框

复选框,支持多选(如兴趣爱好、权限勾选)

用法:绑定数组变量,点击添加或移除选项

选择器

说明:下拉选择框,适用于选项较多的场景(如国家、职业)

用法:绑定变量,支持搜索、分组或自定义选项。若选项来自接口、共享数据或动态变量,通常还会继续结合选项数据全局数据源远程请求配置。

开关

说明:布尔值切换按钮(开/关),适用于状态切换(如是否启用)

用法:绑定布尔变量,点击切换状态

评分

说明:星级评分组件,适用于用户评价(如商品评分)

用法:绑定数值变量,支持半星或整数评分

时间

说明:选择具体时间点(如“14:30”),适用于日程安排

用法:绑定时间变量,支持24小时制或12小时制

时间区间

说明:选择开始和结束时间,适用于时间段选择(如会议时间)

用法:绑定两个时间变量,支持联动校验(如结束时间需晚于开始时间)

滑块

说明:拖动滑块选择数值,适用于范围选择(如音量调节、价格区间)

用法:绑定数值变量,支持最小值、最大值和步长设置

日期

说明:选择具体日期(如“2023-10-01”),适用于生日、截止日期等

用法:绑定日期变量,支持日历视图或快速选择

日期区间

说明:选择开始和结束日期,适用于日期范围选择(如旅行日期)

用法:绑定两个日期变量,支持禁用周末或节假日

颜色选择器

说明:通过调色板或RGB/HEX值选择颜色,适用于主题定制

用法:绑定颜色变量,支持透明度调节

级联选择器

说明:多级联动选择框(如省-市-区),适用于层级化数据

用法:绑定数组变量,支持动态加载子级选项

上传

说明:上传文件或图片,支持拖拽、多选或预览

用法:绑定文件变量,支持限制文件类型、大小或数量

穿梭框

说明:左右双栏选择器,支持将选项从一栏移动到另一栏(如权限分配)

用法:绑定两个数组变量,支持搜索、全选或自定义操作

树形控件

说明:展示树形结构数据(如文件夹、组织架构),支持展开/折叠

用法:绑定树形数据,支持点击节点触发事件

树形选择

说明:在树形结构中选择节点(如选择部门),支持单选或多选 用法:绑定变量,支持搜索、懒加载或自定义节点样式

省市区选择器

说明:专门选择中国省市区,支持联动(如选择省后加载市)

用法:绑定三个变量(省、市、区),支持默认值或清空

富文本框

说明:支持富文本编辑(如加粗、插入图片),适用于内容创作

用法:绑定HTML变量,支持工具栏自定义或粘贴过滤

数据表格

说明:动态渲染表格数据,支持分页、排序或筛选

用法:绑定数组数据,支持自定义列、行操作或合计行;如果需要继续了解更完整的表格能力和接入方式,可以查看数据表格

特性:

  • 高效展示:能够高效地展示大量数据,确保数据列表清晰明了。
  • 排序:支持对各列数据进行排序,用户可以方便地按照需要的列进行升序或降序排列数据。
  • 分页:支持分页功能,对数据进行分页展示,使用户能够轻松浏览和管理大数据量,而不会造成页面加载过慢的问题。
  • 自定义列:用户可以自由定义表格的列,设置列的显示名称、数据类型等,以满足不同的显示和业务需求。
  • 动态操作:支持在数据表格中添加动态操作,如编辑、删除、查看详情等,用户可以根据需要对每行数据进行操作。

数据表格

唯一值

说明:校验输入值是否唯一(如用户名不能重复),适用于注册表单

用法:绑定变量,异步校验数据源中是否已存在该值

手写签名

说明:通过触摸屏或鼠标手写签名,适用于合同签署

用法:绑定图片变量,支持清空、保存或转换为Base64

计算公式

计算公式

说明:根据其他字段的值自动计算结果(如总价=单价×数量)

用法:绑定公式表达式,支持加减乘除或函数调用。公式类场景通常还会继续配合使用计算公式内置公式函数使用。

特性:

  • 自定义公式计算:用户可以通过编写自定义的公式来计算结果。公式可以读取表单中的数据,并进行复杂的运算和逻辑处理。
  • 结果显示:计算公式组件将自动显示运算结果,使用户能够直观查看计算结果的数据。
  • 不可手动修改:计算公式组件的显示结果是只读的,用户无法手动修改,确保显示数据的准确性和一致性。

子表单选择器

说明:用于关联并选择已有子表单数据的专用组件,通过弹窗形式展示子表单列表

用法:在订单表单中选择已存在的客户信息(客户子表单),自动填充客户名称、联系方式等字段

位置选择器

说明:专门用于收集地理位置信息的表单组件,支持地图可视化点选或搜索等方式,灵活获取详细地址或精准坐标数据

用法:常见于订单、物流、门店管理等需要地址 / 坐标数据的业务场景

如果内置基础组件仍然无法完全覆盖业务需求,也可以继续扩展成自定义组件或模板,相关做法可参考扩展组件扩展模板