内置分组和组件
以下是设计器中所有的分组及组件清单，方便在扩展拖拽规则或自定义逻辑时快速查找组件标识与分组 ID。下面按 PC 端与移动端分别列出默认配置，协助你在开发中准确引用。
内置组件分组
| 分组名称 | 分组 ID |
|---|---|
| 模板列表 | template |
| 基础组件 | main |
| 子表单组件 | subform |
| 容器组件 | container |
| 图表组件 | chart |
| 辅助组件 | aide |
| 布局组件 | layout |
内置组件 - PC 端
基础组件 (main)
| 组件名称 | 组件标识(name) |
|---|---|
| 输入框 | input |
| 多行输入框 | textarea |
| 密码输入框 | password |
| 计数器 | inputNumber |
| 提及 | elMention |
| 分段控制器 | elSegmented |
| 单选框 | radio |
| 多选框 | checkbox |
| 选择器 | select |
| 开关 | switch |
| 评分 | rate |
| 时间 | timePicker |
| 时间区间 | timeRange |
| 滑块 | slider |
| 日期 | datePicker |
| 日期区间 | dateRange |
| 颜色选择器 | colorPicker |
| 级联选择器 | cascader |
| 上传 | upload |
| 穿梭框 | elTransfer |
| 树形控件 | tree |
| 树形选择 | elTreeSelect |
| 省市区选择器 | fcCity |
| 富文本框 | fcEditor |
| 数据表格 | dataTable |
| Vxe数据表格 | fcVxeDataTable |
| 唯一值 | fcId |
| 手写签名 | signaturePad |
| 计算公式 | fcValue |
| 子表单选择器 | fcDataSelect |
| 位置选择器 | FcTdtMapPicker |
| 子表单 | group |
| 分组 | subForm |
| 分步表单 | stepForm |
| 表格表单 | tableForm |
| 表格表单Pro | tableFormPro |
| 嵌套表单 | nestedTableForm |
| 子表格表单 | nestedSubTableForm |
| 无限级表单 | infiniteTableForm |
辅助组件 (aide)
| 组件名称 | 组件标识(name) |
|---|---|
| 提示 | elAlert |
| 按钮 | elButton |
| 下拉菜单 | fcDropdown |
| 文字 | text |
| 段落 | paragraph |
| HTML | html |
| 标题 | fcTitle |
| 统计栏 | elStatistic |
| 分割线 | elDivider |
| 标签 | elTag |
| 链接 | elLink |
| 文字提示 | elTooltip |
| 水印 | elWatermark |
| 图片 | elImage |
| 音频播放器 | audioBox |
| 视频播放器 | videoBox |
| 头像框 | elAvatar |
| 条形码 | barCodeBox |
| 内嵌网页 | iframeBox |
| 二维码 | qrCodeBox |
| Markdown | markdown |
| 插槽组件 | fcSlot |
| 动态区域 | fcJson |
| Vue组件 | fcDynamicRender |
| 表单项 | elFormItem |
图表组件 (chart)
| 组件名称 | 组件标识(name) |
|---|---|
| 折线图 | lineChart |
| 体积图 | areaChart |
| 柱状图 | barChart |
| 条形图 | stripeChart |
| 饼图 | pieChart |
| 漏斗图 | funnelChart |
| 仪表盘 | gaugeChart |
| 雷达图 | radarChart |
| 散点图 | scatterChart |
| 自定义图表 | customChart |
| 流程图 | flowDiagram |
| 时序图 | sequenceDiagram |
| 类图 | classDiagram |
| 状态图 | stateDiagram |
| 象限图 | quadrantDiagram |
| 思维导图 | mindmapDiagram |
| 时间线图 | timelineDiagram |
| 数据包图 | packetDiagram |
| 看板图 | kanbanDiagram |
布局组件 (layout)
| 组件名称 | 组件标识(name) |
|---|---|
| 栅格布局 | fcRow |
| 格子 | col |
| 表格布局 | fcTable |
| 内联布局 | fcInlineForm |
| 盒子布局 | fcFlex |
| 盒子布局 | fcFlex2 |
| 格子 | fcCell |
| 标签页 | elTabs |
| 间距 | space |
| 卡片 | elCard |
| 折叠面板 | elCollapse |
| 描述列表 | elDescriptions |
| 弹出框 | fcDialog |
| 抽屉 | fcDrawer |
模板 (template)
| 组件名称 | 组件标识(name) |
|---|---|
| 三列栅格 | col3 |
| 四列栅格 | col4 |
| 四行三列表格 | table43 |
| 金额 | chineseAmount |
| 时长 | duration |
内置组件 - 移动端
基础组件 (main)
| 组件名称 | 组件标识(name) |
|---|---|
| 输入框 | input |
| 多行输入框 | textarea |
| 密码输入框 | password |
| 数字输入框 | stepper |
| 单选框 | radio |
| 多选框 | checkbox |
| 选择器 | select |
| 开关 | switch |
| 评分 | rate |
| 时间 | timePicker |
| 日期 | datePicker |
| 级联选择器 | cascader |
| 日历 | calendar |
| 日历区间 | calendarRange |
| 滑块 | slider |
| 上传 | uploader |
| 省市区选择器 | fcCity |
| 唯一值 | fcId |
| 手写签名 | signaturePad |
| 计算公式 | fcValue |
| 子表单 | group |
| 分组 | subForm |
| 分步表单 | stepForm |
| 表格表单 | tableForm |
| 位置选择器 | FcTdtMapPicker |
辅助组件 (aide)
| 组件名称 | 组件标识(name) |
|---|---|
| 通知 | vanNoticeBar |
| 按钮 | vanButton |
| 下拉菜单 | fcDropdown |
| 文字 | text |
| 段落 | paragraph |
| HTML | html |
| 标题 | fcTitle |
| 分割线 | vanDivider |
| 标签 | vanTag |
| 图标 | vanIcon |
| 图片 | vanImage |
| 音频播放器 | audioBox |
| 视频播放器 | videoBox |
| 条形码 | barCodeBox |
| 内嵌网页 | iframeBox |
| 二维码 | qrCodeBox |
| Markdown | markdown |
| 插槽组件 | fcSlot |
| 动态区域 | fcJson |
| Vue组件 | fcDynamicRender |
| 表单项 | vanField |
图表组件 (chart)
| 组件名称 | 组件标识(name) |
|---|---|
| 折线图 | lineChart |
| 体积图 | areaChart |
| 柱状图 | barChart |
| 条形图 | stripeChart |
| 饼图 | pieChart |
| 漏斗图 | funnelChart |
| 仪表盘 | gaugeChart |
| 雷达图 | radarChart |
| 散点图 | scatterChart |
| 自定义图表 | customChart |
| 流程图 | flowDiagram |
| 时序图 | sequenceDiagram |
| 类图 | classDiagram |
| 状态图 | stateDiagram |
| 象限图 | quadrantDiagram |
| 思维导图 | mindmapDiagram |
| 时间线图 | timelineDiagram |
| 数据包图 | packetDiagram |
| 看板图 | kanbanDiagram |
布局组件 (layout)
| 组件名称 | 组件标识(name) |
|---|---|
| 栅格布局 | fcRow |
| 格子 | col |
| 表格布局 | fcTable |
| 盒子布局 | fcFlex |
| 盒子布局 | fcFlex2 |
| 格子 | fcCell |
| 标签页 | vanTabs |
| 选项卡 | vanTab |
| 间距 | space |
| 折叠面板 | vanCollapse |
| 面板 | vanCollapseItem |
| 单元格 | vanCellGroup |
| 单元格子 | vanCell |
| 弹出层 | fcPopup |
模板 (template)
| 组件名称 | 组件标识(name) |
|---|---|
| 三列栅格 | col3 |
| 四行三列表格 | table43 |
| 金额 | chineseAmount |
查看组件标识
先讲一下组件/模板标识的查看方法
- 清空当前表单，单独拖出目标组件/模板查看其唯一标识。
- 在 JSON 面板中定位该组件的配置规则。
查看组件的标识
查看模板的标识
