X

联系客服

公众号

下载源码

关注官方公众号
扫码联系客服
表单示例与功能演示

位置选择:地图点选拜访地点

设计器真实拖拽:提示 + 位置选择器(天地图)。表单级 API Key 已配置。

Vue3ElementPlus

Mermaid流程图:审批资料齐全判断

设计器真实拖拽配置:提示 + Mermaid 流程图,演示审批分支语法。

Vue3ElementPlus

权限条件:无导出权限时隐藏按钮

导出按钮按权限 goods:info:export 控制显隐;在设计器权限模拟中开关权限即可预览效果。

Vue3ElementPlus

打印表单:一键打印当前表单

通过按钮行为调用内置 print 动作,打印当前表单内容,适合回执/申请单场景。

Vue3ElementPlus

全局事件:多按钮复用打开须知

在全局配置定义打开弹窗事件,多个按钮通过全局事件引用,避免重复写同一段逻辑。

Vue3ElementPlus

全局样式:Class 统一按钮与标题外观

在全局配置定义 Class,挂到标题分割线与按钮上,一处修改多处生效。

Vue3ElementPlus

分步表单:入职信息三步采集

用分步表单拆成基本信息、材料上传、确认提交三步,适合入职/申请类长表单。

Vue3ElementPlus

行为配置:复制文本与打开链接

按钮点击执行内置动作:复制客服微信号,并支持新窗口打开帮助文档。

Vue3ElementPlus

模块弹窗:主表打开子弹窗并回写商品

主表通过行为打开弹窗;在弹窗内选择商品后回写到主表商品字段并关闭弹窗。

Vue3ElementPlus

禁用条件:审批通过后锁定报销金额

审批状态为「已通过」时,报销金额自动禁用,避免通过后再被改动。

Vue3ElementPlus

全局变量:数据绑定自动带入申请人

通过全局变量定义当前申请人与请假类型选项,再用数据绑定挂到字段值/选项,不要把变量写进默认值。

Vue3ElementPlus

数据联动:选商品自动带出单价

选择商品后,通过数据联动(计算公式模式)自动写入单价,减少手填错误。

Vue3ElementPlus

条件显隐必填:选其它才显示并必填说明

问题类型选「其它」时显示补充说明并设为必填;其它选项下隐藏且非必填。演示隐藏条件与必填条件。

Vue3ElementPlus

计算公式:数量单价金额自动汇总

通过计算公式组件,用数量×单价自动得到金额合计,演示无代码完成金额自动计算。

Vue3ElementPlus

表单提交前置拦截示例

在 beforeSubmit 中返回 Promise,根据业务条件决定是否继续或中断表单提交流程。

Vue3ElementPlus

数据表格:实现编辑列数据

通过自定义 render 渲染输入组件,实现表格列数据的实时修改与双向绑定。

Vue3ElementPlus

移动端自适应

多种常用表单组件支持响应式布局,在 PC 与移动端自动适配显示。

Vue3ElementPlus

数据表格:列样式自定义

通过 column.render 可完全接管单元格渲染逻辑,实现动态样式、条件渲染等复杂展示效果。

Vue3ElementPlus

表格表单:获取当前行索引

在表格表单的行内按钮或组件事件中,准确获取当前行索引,用于行级操作与业务逻辑处理。

Vue3ElementPlus

组件样式:多种方式修改组件样式

通过不同方式为表单组件设置样式,对比各方案的适用场景与可控程度。

Vue3ElementPlus

表格表单:通过接口动态渲染行数据

基于接口返回的数据,动态加载并渲染表格表单的行内容。

Vue3ElementPlus

表单默认值:多种方式设置字段初始值

通过多种方式为表单字段设置默认值,满足不同业务场景下的初始化需求。

Vue3ElementPlus

基于表单数据生成二维码与条码

通过表单输入动态生成二维码与条码,适用于商品编码、信息标识等场景。

Vue3VantElm

表单国际化:表单多语言动态切换

通过 $t 国际化变量与 $loadData 机制,实现表单字段和标题的多语言联动更新。

Vue3ElementPlus

表单验证:手动校验字段与表单

通过调用表单 API,主动触发单个字段或整个表单的校验逻辑,适用于自定义按钮或复杂交互场景。

Vue3ElementPlus

表单控制:手动触发表单提交与重置

通过调用表单 API,在自定义按钮中手动触发表单提交或重置操作,灵活控制表单流程。

Vue3ElementPlus

组件联动:在事件中修改其他组件

通过表单 API 获取并修改其他组件的规则或值,实现表单内部的动态联动。

Vue3ElementPlus

事件控制:手动触发组件事件

基于表单 API 调用组件实例的 $emit 方法,手动触发组件事件,实现跨组件事件联动与交互模拟。

Vue3ElementPlus

组件交互:通过表单 API 执行 Vue 组件方法

通过表单 API 获取组件实例,并在事件中直接调用组件内部方法,实现组件行为的主动控制。

Vue3ElementPlus

表单布局:多种方式配置表单行列布局

支持通过字段列配置与行列容器组件两种方式组织表单布局,实现表单的灵活排列。

Vue3ElementPlus