Skip to content

基础组件 ​

基础组件负责收集业务数据,是搭表时用得最多的一组。从组件列表的「基础组件」拖入工作区,再按基础 → 属性 → 验证的顺序配置,最后预览验收。

组件列表中的基础组件

怎么选组件(速查) ​

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

拖入后的标准配置顺序 ​

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

选中输入框后改标题与必填

组件一览 ​

以当前设计器列表为准。下面每个组件附拖入画布后的样子。

输入类 ​

输入框 ​

姓名、邮箱、工号、单行地址等。常配:占位、最大长度、清除按钮、是否必填、格式校验。

输入框

多行输入框 ​

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

多行输入框

密码输入框 ​

登录密码、授权码。设计预览勿填生产环境真实密码。

密码输入框

提及 ​

评论里 @同事、选话题。需配置可选列表。

提及

富文本框 ​

公告正文、需加粗 / 列表的说明。简单备注用多行即可。

富文本框

选择类 ​

分段控制器 ​

2~4 个短互斥项(紧急程度、配送方式等)。

分段控制器

单选框 ​

性别、是否等互斥项,选项少时更直观。

单选框

多选框 ​

兴趣、材料清单。至少选几项用验证配置。

多选框

选择器 ​

部门、会议室、状态等选项较多时。常配静态选项、远程或全局数据源;可搜索。

选择器

选择器的选项数据

开关 ​

是否同意协议、是否启用。常与隐藏条件、禁用条件搭配。

开关

级联选择器 ​

多级分类、逐级选择。

级联选择器

树形控件 ​

树展示与勾选。

树形控件

树形选择 ​

下拉树选择。

树形选择

穿梭框 ​

从「可选」到「已选」批量转移。

穿梭框

省市区选择器 ​

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

省市区选择器

子表单选择器 ​

从已有子表数据中挑选一行带入主表。

子表单选择器

选项维护详见选项数据。

数值与评分 ​

数字输入框 ​

数量、人数、天数。可设最小值、最大值、步长。

数字输入框

数字输入框的最小值等属性

滑块 ​

区间感强的分值(如预算紧张度 0~100)。

滑块

评分 ​

星级评价(满意度 1~5 星)。

评分

计算公式 ​

自动算值(数量×单价等),见公式。

计算公式

日期与时间 ​

时间 ​

预约时刻、上下班时间。

时间

时间区间 ​

起止时段。

时间区间

日期 ​

入职日、来访日。

日期

日期区间 ​

出差起止、请假区间;必要时用公式算天数。

日期区间

会议室预约常用「开始时间 + 结束时间」;请假常用日期区间。

上传与签名 ​

上传 ​

证件、合同、发票影像。常配文件类型、个数、大小;上传地址由运行环境配置。

上传

手写签名 ​

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

手写签名

其它常用 ​

颜色选择器 ​

选色值(主题、标识色)。

颜色选择器

唯一值 ​

业务唯一标识类场景。

唯一值

位置选择器 ​

地图选点(需相关配置)。

位置选择器

数据表格 ​

表格数据展示。行明细录入更常用表格表单。

数据表格

Vxe 数据表格 ​

增强交互的表格展示。

Vxe 数据表格

TIP

环境可能增删组件,以你左侧列表为准。界面组件名以列表为准:数量类控件叫数字输入框(属性文案里可能仍出现「计数器」字样)。

场景示例 ​

入门:意见反馈(输入框 + 多行 + 评分) ​

背景:收集一条简单反馈:联系人、意见正文、满意度星级。

依次拖入输入框、多行输入框、评分 → 字段名称改为「联系人」「意见」「满意度」→ 三项打开「是否必填」→ 预览试填并提交。

意见反馈中的评分字段

预期:三项均可填写;未填必填项时无法顺利提交;满意度显示为星级。

入门:会议室预约(选择器 + 时间 + 数字 + 多行) ​

背景:同事预约会议室,需要选房间、起止时间、人数,备注选填。

拖入选择器「会议室」,在属性配置的选项数据里加静态选项 → 两个时间「开始时间」「结束时间」并设必填 → 数字输入框「参会人数」,最小值 1 并设必填 → 多行「备注」(可不设必填)→ 预览试填提交。

会议室预约表单结构

预览中试填会议室预约

预期:会议室可下拉选择;人数不能低于最小值;备注可空。

常用:访客登记(输入 + 日期 + 多行) ​

背景:前台登记访客姓名、手机号、来访日期与事由。

拖入两个输入框、一个日期、一个多行 → 标题改为「姓名」「手机号」「来访日期」「来访事由」→ 四项设必填,手机号可再加格式校验 → 需要时在表单配置里调标签位置并显示提交按钮 → 预览试填。

访客登记常用基础字段

预期:四项齐全;未填必填项会提示。若还要「是否驾车才显示车牌」,再加开关 + 输入框,并用隐藏条件。

注意点 ​

  • 界面组件名以列表为准:数量类控件叫数字输入框(属性文案里可能仍出现「计数器」字样)。
  • 选择器、单选、多选的选项在属性配置 → 选项数据维护;多表共用时优先全局数据源。
  • 上传、地图等依赖环境配置的组件,本地预览异常时先确认环境是否已接通。

相关阅读 ​

相关技术文档 ​