Skip to content

基础组件

基础组件负责收集业务数据,是搭表时用得最多的一组。从组件列表的「基础组件」拖入工作区,再配合基础配置属性配置验证配置完成落地。

怎么选组件(速查)

你要收集…优先组件备注
短文本(姓名、工号)输入框可加格式校验
长文本(备注、事由)多行输入框行数与自适应
密码密码输入框预览勿留真实密码
@提醒、话题提及需配置可选数据
少量互斥(性别、是否)单选 / 分段控制器选项少时更直观
多选标签多选框提交多为多值
选项较多选择器可搜索;选项见选项数据
开关状态开关适合协议、启用
数量、金额数字计数器可设步长、范围
打分评分 / 滑块满意度、难度
时刻 / 日期 / 区间时间、日期及其区间可限制范围
省市区省市区选择器地址类首选
多级分类级联 / 树形选择维护树形选项
两侧挑选穿梭框权限、多选转移
附件上传需环境配置上传地址
签字手写签名现场确认
自动计算结果计算公式公式文档
富文本说明富文本框偏内容编辑
颜色颜色选择器主题、标识色
业务唯一号唯一值系统生成类场景
地图位置位置选择器需地图相关配置
表格数据展示数据表格 / Vxe 数据表格明细录入优先看子表单
从子表挑选一行子表单选择器关联已有子表数据

拖入后的标准配置顺序

  1. 基础:标题、提示、宽度(基础配置
  2. 属性:占位、选项、清除、禁用等(属性配置
  3. 验证:必填、格式、长度(验证配置
  4. 高级:显隐、联动、公式(按需)
  5. 预览验收

选中输入框后的属性栏;

分类详解与示例

1. 输入类

输入框

用途:姓名、邮箱、工号、单行地址等。 常配:占位、最大长度、清除按钮、输入类型、必填/格式校验。

入门示例:字段「姓名」,必填,占位「请输入真实姓名」。

多行输入框

用途:请假事由、反馈意见。 常配:行数或高度自适应、最大长度。

入门示例:固定 3 行「来访事由」;长文案说明开自适应。

密码输入框

用途:登录密码、授权码。 注意:仅作采集时注意安全策略;设计预览勿填生产密码。

提及

用途:评论里 @同事、选话题。 常配:可选列表数据源。

富文本框

用途:公告正文、需加粗/列表的说明。 注意:偏内容编辑;简单备注用多行即可。

2. 选择类

单选框 / 分段控制器

用途:性别、紧急程度、配送方式等互斥项。 分段控制器更适合 2~4 个短选项的「段选」外观。

入门示例:配送方式三选一,配合隐藏条件显示地址或门店。

多选框

用途:兴趣、材料清单、多权限勾选。 注意:校验「至少选几项」用验证配置。

选择器

用途:部门、城市、状态等选项较多时。 常配:静态 / 远程 / 全局数据源;可搜索。

常用示例:费用类型走全局数据源,多张报销表共用。

开关

用途:是否同意协议、是否启用。 常用示例:未打开「同意协议」时禁用提交按钮。

级联选择器 / 树形选择 / 树形控件

用途:多级分类、组织树。 级联偏「逐级选择」;树形选择偏下拉树;树形控件偏树展示与勾选。

穿梭框

用途:从「可选」到「已选」批量转移,如可访问项目列表。

省市区选择器

用途:收货地区、户籍地。常与详细地址(输入/多行)组合。

子表单选择器

用途:从已有子表数据中挑选一行带入主表(具体能力以组件为准)。

选项维护:见选项数据

3. 数值与评分

组件用途示例
计数器数量、人数、天数参会人数,最小 1
滑块区间感强的分值预算紧张度 0~100
评分星级评价满意度 1~5 星
计算公式自动算值数量×单价,见公式

4. 日期与时间

组件用途
时间 / 时间区间预约时段、上下班时间
日期 / 日期区间入职日、出差起止

入门示例:会议室预约——开始时间、结束时间;用预览检查结束不早于开始(可用校验或公式辅助)。 常用示例:请假起止日期 + 公式 DIFFDAYS 算天数。

5. 上传与签名

上传

用途:身份证、合同、发票影像。 常配:文件类型、个数、大小限制(属性中);必填。 注意:上传地址与权限由环境配置,不可用时联系管理员。

手写签名

用途:现场签收、确认阅读。 常与「已阅读条款」开关一起出现。

6. 其它常用

组件说明
颜色选择器选色值
唯一值业务唯一标识类场景
位置选择器地图选点(需相关 Key/配置)
数据表格 / Vxe 数据表格表格展示与复杂表格交互;行明细录入更常用表格表单

完整业务示例

入门:会议室预约(5 个字段)

字段组件关键配置
会议室选择器静态选项
开始 / 结束时间或日期时间
参会人数计数器最小 1
备注多行非必填

步骤:拖入 → 改标题 → 会议室配选项 → 人数与会议室必填 → 预览提交。

常用:访客登记

字段组件
访客姓名输入框
手机号输入框 + 手机号校验
来访日期日期
来访事由多行
是否驾车开关
车牌号输入框(驾车为是时显示,隐藏条件
证件照片上传

常用:供应商准入

公司名称、信用代码(输入 + 必填)→ 合作地区(省市区)→ 资质附件(上传)→ 是否接受条款(开关)→ 接受前禁用提交(禁用条件)。

相关阅读

相关技术文档