基础组件
基础组件负责收集业务数据,是搭表时用得最多的一组。从组件列表的「基础组件」拖入工作区,再配合基础配置、属性配置、验证配置完成落地。
怎么选组件(速查)
| 你要收集… | 优先组件 | 备注 |
|---|---|---|
| 短文本(姓名、工号) | 输入框 | 可加格式校验 |
| 长文本(备注、事由) | 多行输入框 | 见行数与自适应 |
| 密码 | 密码输入框 | 预览勿留真实密码 |
| @提醒、话题 | 提及 | 需配置可选数据 |
| 少量互斥(性别、是否) | 单选 / 分段控制器 | 选项少时更直观 |
| 多选标签 | 多选框 | 提交多为多值 |
| 选项较多 | 选择器 | 可搜索;选项见选项数据 |
| 开关状态 | 开关 | 适合协议、启用 |
| 数量、金额数字 | 计数器 | 可设步长、范围 |
| 打分 | 评分 / 滑块 | 满意度、难度 |
| 时刻 / 日期 / 区间 | 时间、日期及其区间 | 可限制范围 |
| 省市区 | 省市区选择器 | 地址类首选 |
| 多级分类 | 级联 / 树形选择 | 维护树形选项 |
| 两侧挑选 | 穿梭框 | 权限、多选转移 |
| 附件 | 上传 | 需环境配置上传地址 |
| 签字 | 手写签名 | 现场确认 |
| 自动计算结果 | 计算公式 | 见公式文档 |
| 富文本说明 | 富文本框 | 偏内容编辑 |
| 颜色 | 颜色选择器 | 主题、标识色 |
| 业务唯一号 | 唯一值 | 系统生成类场景 |
| 地图位置 | 位置选择器 | 需地图相关配置 |
| 表格数据展示 | 数据表格 / Vxe 数据表格 | 明细录入优先看子表单 |
| 从子表挑选一行 | 子表单选择器 | 关联已有子表数据 |
拖入后的标准配置顺序
;
分类详解与示例
1. 输入类
输入框
用途:姓名、邮箱、工号、单行地址等。 常配:占位、最大长度、清除按钮、输入类型、必填/格式校验。
入门示例:字段「姓名」,必填,占位「请输入真实姓名」。
多行输入框
用途:请假事由、反馈意见。 常配:行数或高度自适应、最大长度。
入门示例:固定 3 行「来访事由」;长文案说明开自适应。
密码输入框
用途:登录密码、授权码。 注意:仅作采集时注意安全策略;设计预览勿填生产密码。
提及
用途:评论里 @同事、选话题。 常配:可选列表数据源。
富文本框
用途:公告正文、需加粗/列表的说明。 注意:偏内容编辑;简单备注用多行即可。
2. 选择类
单选框 / 分段控制器
用途:性别、紧急程度、配送方式等互斥项。 分段控制器更适合 2~4 个短选项的「段选」外观。
入门示例:配送方式三选一,配合隐藏条件显示地址或门店。
多选框
用途:兴趣、材料清单、多权限勾选。 注意:校验「至少选几项」用验证配置。
选择器
用途:部门、城市、状态等选项较多时。 常配:静态 / 远程 / 全局数据源;可搜索。
常用示例:费用类型走全局数据源,多张报销表共用。
开关
用途:是否同意协议、是否启用。 常用示例:未打开「同意协议」时禁用提交按钮。
级联选择器 / 树形选择 / 树形控件
用途:多级分类、组织树。 级联偏「逐级选择」;树形选择偏下拉树;树形控件偏树展示与勾选。
穿梭框
用途:从「可选」到「已选」批量转移,如可访问项目列表。
省市区选择器
用途:收货地区、户籍地。常与详细地址(输入/多行)组合。
子表单选择器
用途:从已有子表数据中挑选一行带入主表(具体能力以组件为准)。
选项维护:见选项数据。
3. 数值与评分
| 组件 | 用途 | 示例 |
|---|---|---|
| 计数器 | 数量、人数、天数 | 参会人数,最小 1 |
| 滑块 | 区间感强的分值 | 预算紧张度 0~100 |
| 评分 | 星级评价 | 满意度 1~5 星 |
| 计算公式 | 自动算值 | 数量×单价,见公式 |
4. 日期与时间
| 组件 | 用途 |
|---|---|
| 时间 / 时间区间 | 预约时段、上下班时间 |
| 日期 / 日期区间 | 入职日、出差起止 |
入门示例:会议室预约——开始时间、结束时间;用预览检查结束不早于开始(可用校验或公式辅助)。 常用示例:请假起止日期 + 公式 DIFFDAYS 算天数。
5. 上传与签名
上传
用途:身份证、合同、发票影像。 常配:文件类型、个数、大小限制(属性中);必填。 注意:上传地址与权限由环境配置,不可用时联系管理员。
手写签名
用途:现场签收、确认阅读。 常与「已阅读条款」开关一起出现。
6. 其它常用
| 组件 | 说明 |
|---|---|
| 颜色选择器 | 选色值 |
| 唯一值 | 业务唯一标识类场景 |
| 位置选择器 | 地图选点(需相关 Key/配置) |
| 数据表格 / Vxe 数据表格 | 表格展示与复杂表格交互;行明细录入更常用表格表单 |
完整业务示例
入门:会议室预约(5 个字段)
| 字段 | 组件 | 关键配置 |
|---|---|---|
| 会议室 | 选择器 | 静态选项 |
| 开始 / 结束 | 时间或日期时间 | — |
| 参会人数 | 计数器 | 最小 1 |
| 备注 | 多行 | 非必填 |
步骤:拖入 → 改标题 → 会议室配选项 → 人数与会议室必填 → 预览提交。
常用:访客登记
| 字段 | 组件 |
|---|---|
| 访客姓名 | 输入框 |
| 手机号 | 输入框 + 手机号校验 |
| 来访日期 | 日期 |
| 来访事由 | 多行 |
| 是否驾车 | 开关 |
| 车牌号 | 输入框(驾车为是时显示,隐藏条件) |
| 证件照片 | 上传 |
常用:供应商准入
公司名称、信用代码(输入 + 必填)→ 合作地区(省市区)→ 资质附件(上传)→ 是否接受条款(开关)→ 接受前禁用提交(禁用条件)。


