组件列表

组件列表是可视化表单构建的核心，所有可用于搭建表单的基础组件、业务组件均集中在此展示，是从零开始搭建新表单的起点，主要分为组件、字段、大纲三块操作区域；如果你后续准备扩展自己的组件分组、拖拽组件或模板，这里也是最直接的落点。

• 组件区域提供了丰富的组件和模板管理功能，主要包含模板、基础组件、子表单组件、容器组件、图表组件、辅助组件、布局组件等七个类别。选择合适的组件类型非常重要，关系到系统业务的用户体验，对用户操作、数据收集、数据分析都有很大的影响；如果你还想进一步查看每个内置分组下具体有哪些默认组件、它们对应的组件标识和分组 ID，可以继续阅读内置分组和组件。
• 字段列表区域提供了管理和操作字段的功能；
• 表单大纲区域提供了一目了然的表单结构视图。

内置组件分类速览

当前设计器默认内置的组件主要按以下类别组织。日常搭建表单时，通常先按“要收集什么数据”选择基础组件，再按“怎么组织结构”补充布局、容器、模板或辅助组件；如果你需要继续查看每个组件对应的组件标识和分组 ID，可以直接阅读内置分组和组件。

模板

• 三列栅格
• 四列栅格
• 四行三列表格
• 金额
• 时长

基础组件

• 输入框
• 多行输入框
• 密码输入框
• 计数器
• 提及
• 分段控制器
• 单选框
• 多选框
• 选择器
• 开关
• 评分
• 时间
• 时间区间
• 滑块
• 日期
• 日期区间
• 颜色选择器
• 级联选择器
• 上传
• 穿梭框
• 树形控件
• 树形选择
• 省市区选择器
• 富文本框
• 数据表格
• Vxe 数据表格
• 唯一值
• 手写签名
• 计算公式
• 子表单选择器
• 位置选择器
• 子表单
• 分组
• 分步表单
• 表格表单
• 表格表单 Pro
• 嵌套表单
• 子表格表单
• 无限级表单

辅助组件

• 提示
• 按钮
• 下拉菜单
• 文字
• 段落
• HTML
• 标题
• 统计栏
• 分割线
• 标签
• 链接
• 文字提示
• 水印
• 图片
• 音频播放器
• 视频播放器
• 头像框
• 条形码
• 内嵌网页
• 二维码
• Markdown
• 插槽组件
• 动态区域
• Vue 组件
• 表单项

图表组件

• 折线图
• 体积图
• 柱状图
• 条形图
• 饼图
• 漏斗图
• 仪表盘
• 雷达图
• 散点图
• 自定义图表
• 流程图
• 时序图
• 类图
• 状态图
• 象限图
• 思维导图
• 时间线图
• 数据包图
• 看板图

布局组件

• 栅格布局
• 格子
• 表格布局
• 内联布局
• 盒子布局
• 标签页
• 间距
• 卡片
• 折叠面板
• 描述列表
• 弹出框
• 抽屉

选型建议

• 需要录入字段值时，优先从基础组件里选择。
• 需要做页面分组、分页签、弹窗或布局排版时，优先看布局组件和容器类能力。
• 需要做说明、按钮、媒体展示、统计信息时，优先看辅助组件。
• 需要复用固定结构时，优先考虑模板，而不是每次手工拖拽多个组件。

拖拽创建表单

组件列表中的组件支持直接拖入工作区，完成字段创建和布局搭建。对于大多数表单设计任务，常见的操作链路就是“选择组件 -> 拖入画布 -> 配置属性 -> 预览结果”。

模板与高级组件入口

组件列表不仅是基础字段入口，也是模板、高级组件和布局能力的统一入口。例如表格表单、分步表单、计算公式、数据表格等能力，都适合从组件列表中快速定位并插入。开发侧如果要理解这些分类是如何组织的，可以参考扩展组件分组中的分组机制；当前默认分组也和源码里的菜单定义保持一致。

自定义模板 / 组件

当内置模板或组件无法完全满足业务需求时，可以通过扩展方式沉淀自定义模板和自定义组件。这样可以把常用业务结构复用到多个表单中，减少重复搭建成本。具体做法可以继续查看扩展组件与扩展模板；如果你还需要从代码侧理解最终生成的规则数据结构，可以再结合TS类型定义阅读。