基于Vue3，Element Plus的一款表单设计器，支持生成Element和Antd样式的表单

最新推荐文章于 2024-05-20 15:09:32 发布
最新推荐文章于 2024-05-20 15:09:32 发布
阅读量1w 收藏 22
点赞数 3
文章标签： vue.js 可视化 vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GavinZhulei/article/details/123881737
版权
FormMakingv3是一个基于Vue3.x和ElementPlus的可视化表单设计器，支持生成Element和Antd风格的表单。广泛应用在多个行业，提供丰富的字段选择、数据源管理和低代码配置功能，适合复杂布局设计。预览和文档链接已给出。
摘要由CSDN通过智能技术生成

简介

FormMaking v3 是基于 Vue 3.x 和 Element Plus 开发的可视化/低代码表单设计器，可以生成 Element 和 Antd 样式的表单。

FormMaking 目前已被民航、政务、教育、医疗、测绘、金融、网络安全、智慧城市等不同领域采用，V3 版本完全支持兼容 FormMaking，在使用和功能上完全一致。

预览地址：https://form.making.link/v3/sample/?from=csdn

文档地址：https://www.yuque.com/form-making/dpaoao

在这里插入图片描述
在这里插入图片描述

特色功能

丰富的字段

提供了常见的基础字段，复杂的高级字段和布局字段，可以满足一般的需求，如果有特殊的组件要求，可以将自己的组件导入到设计器中，一样可以实现配置。
在这里插入图片描述

数据源

提供了数据源管理，可以对接口数据进行管理和操作，并能做在线测试。

在这里插入图片描述
在这里插入图片描述

低代码配置

可以通过动作事件配置，并调用表单API来实现表单内部的一些操作。

在这里插入图片描述

在这里插入图片描述

复杂的布局

在这里插入图片描述

结语

此处就不把功能一一介绍完了，有兴趣的同学可以到官网进行体验。

预览地址：https://form.making.link/v3/sample/?from=csdn

文档地址：https://www.yuque.com/form-making/dpaoao

GavinZhulei
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue_form_design:基于Vue3.0的表单设计器
03-16
vue_form_design:基于Vue3.0的表单设计器
vue-form-generator:vue3 + ts + element-plus表单生成器
04-10
Vue形式生成器 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
基于vue和element-ui实现的表单设计器 通过拖拽方式快速生成一个表单页面
06-08
基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面，表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。针对选择性控件（radio，select，checkbox）提供选择后触发调用，支持表达式。对选择性控件支持数据联动功能，通过此功能可以做多级联动。动态表格提供单独的弹框进行填写和编辑。布局方式多样化，提供栅格，表格等多种布局方式。支持表单预览模式，表单内容全部非组件化，全部文本显示。针对选择性控件（radio，select，checkbox）选择后将对应的label进行单独存储，方便展示
一款基于Vue3.0的低代码可视化表单设计器工具，轻松搞定表单
最新发布
2401_85161170的博客
05-20 2189
基于Vue的低代码可视化表单设计器工具，通过数据驱动表单渲染 用户可以通过可视化界面快速高效地创建表单，提高开发者对表单的开发效率，节省开发者的时间
el-form-design:一个基于element ui的可拖拽生成表单的表单设计器
05-10
el-form-design 一个基于element ui的可拖拽生成表单的表单设计器 有任何意见建议或者问题请在我 下留言 或者提 issues 我将尽最大努力解决 使用方法 # 1.安装 npm install el-form-design # or yarn install el-form-design # 2. 导入 import elformdesign from 'el-form-design' # 因为是基于 element ui 的 所以可能需要用户提前安装 element ui 并全部导入 Vue.use(ElementUI); Vue.use(elformdesign); # 3 使用 # 直接在页面中 使用 标签 即可展示出 表单编辑页面 示列代码 (表单设计页面) <di
vue-form-create:基于Vue3.0的表单设计器
04-17
vue-form-create 基于 Vue3.0 + TS 的自定义表单生成器。支持 npm 与 cdn 引入的方式。UI 库支持 ant-design-vue 与 element-plus。 支持功能 远端数据获取 图片上传 富文本编辑器 栅格布局 生成 JSON 生成代码 演示地址（github） 演示地址（gitee） github npm 1 安装 使用 npm 或 yarn 安装 我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 $ npm install vue-form-create --save $ yarn add vue-form-create 浏览器引入 在浏览器中使用 script 标签直接引入文件，并使用全局变量 formCreate。 我们在 npm 发布包内
vue3 + elememt-plus 表单生成器
灯火的博客
10-27 1579
昨天写一个表单十几个二十个字段，写起来有点麻烦，中途还出现了改动，一大串一大串看起来有点烦，就算是用循环写也差点意思， 刚好今天有闲余的时间，就写了个生成器，自动生成表单。
基于Vue3+Element-Plus的拖拽式表单设计器
dsyuan001的博客
07-07 3837
在项目开发中，总少不了各类表单的设计，常规开发中总是复制粘贴，包括各种校验规则，提交表单获取列表等操作。一个好的表单设计器可以很好的解决这些问题。
基于 vue3 + element plus的表单设计器
weixin_43689603的博客
10-10 886
基于elememnt plus + vue3 + ts的表单设计器
vue3-form-wizard:Vue 3 Form Wizard是一个可配置的，完全可自定义的JSON表单生成器，可让开发人员轻松创建基于步骤的表单
05-11
Vue 3表单向导 介绍 Vue 3表单向导是一个JSON可配置，完全可自定义的表单生成器，使开发人员可以轻松创建基于步骤的表单。 通过指定JSON配置对象，可以轻松生成表单问题。 最终结果是基于步骤的表单，它将一次显示一个问题。 支持最常见的输入类型： 文字输入 文字区 下拉菜单（可过滤） 单选和多选选项列表 能够创建自己的自定义输入类型 特征 完全可定制的风格 逐步验证输入 自定义验证消息 能够查询API以获取列表选项 每个问题后的回调 目录 文献资料 目录 贡献准则 行为守则 错误和功能请求 版权和许可 入门 使用节点程序包管理器安装程序包： npm install @anivive/vue3-form-wizard 导入到您的组件中并添加到components键： import VueFormWizard from '@anivive/vue3-form-wizar
vue-ele-form-generator可视化表单设计工具 v3.1.0
08-14
为您提供vue-ele-form-generator可视化表单设计工具下载，vue-ele-form-generator是专为vue-ele-form开发的可视化表单设计工具，并且支持vscode 插件、cli 本地启动、在线设计多种方式，让表单开发的效率更上一层楼！vue-ele-form-generator特性：1、提供vscode 插件更贴近日常开发2、可视化配置页面3、提供 vue-ele-form 全部基础组件 和 全部扩展组件4、支持组件属性点选配置5、支持本
vue3-json-schema-form:基于jsonschema的vue3表单生成器
05-23
vue3-json-schema-form a form generator based on jsonschema for vue3 Project setup npm install npm run serve npm run build npm run test:unit npm run lint API 设计 <JsonSchemaForm schema={schema} value={value} xss=removed locale={locale} contextRef={someRef} uiSchema={uiSchema} /> schema json schema 对象，用来定义数据，同时也是我们定义表单的依据 value 表单的数据结果，你可以从外部改变这个 value，在表单被编辑的时候，会通过onChange透出
一款高效的Vue 3低代码表单、工作流表单，包含表单设计器和表单渲染器，可视化设计，一键生成源码
04-19
一款高效的Vue 3低代码表单、工作流表单，包含表单设计器和表单渲染器，可视化设计，一键生成源码，享受更多摸鱼时间。
基于Vue的Element UI表单设计及代码生成器设计源码
04-09
本项目是基于Vue的Element UI表单设计及代码生成器设计源码，包含179个文件，其中120个JavaScript文件，21个SVG文件，15个Vue文件。该系统旨在提供一个便捷的Element UI表单设计及代码生成解决方案，使用户能够快速...
基于Vue3和Element-plus的文章发布平台设计源码
04-08
文章发布平台 - 基于Vue3和Element-plus构建，包含39个文件，如VUE、JS、JSON、JPG、PNG、CJS、GITIGNORE、HUSKY和MD等。该系统是一个文章管理系统，使用Vue3技术栈，为用户提供了一个高效、易用的文章发布平台。
基于Vue和Element UI的动态表单组件设计源码
04-15
基于Vue和Element UI的动态表单组件设计源码，该项目包含217个文件，主要文件类型有95个Vue前端文件，78个JavaScript文件，10个json配置文件，6个gif动画文件，5个Markdown文档，5个HTML页面文件，4个CSS样式文件，3...
基于 vue 和 element-ui 实现的可视化表单设计器
04-19
基于Vue的可视化表单设计器，让表单开发简单而高效；高级版本目前已支持 Vue3。MakingForm 表单设计器（基于可视化操作快速设计出表单页面）。GenerateForm 表单生成器（根据设计器中获取的配置 json 数据，快速渲染...
基于VUE3 使用 Element plus 表单提交，判断是否表单验证已经通关
05-28
对于基于VUE3 使用 Element plus 表单提交的情况，可以使用 Element plus 提供的表单验证函数进行验证。具体步骤如下： 1. 在模板中使用 Element plus 提供的表单组件，并设置验证规则。 2. 在表单提交方法中，调用 Element plus 提供的表单验证函数，判断表单是否验证通过。 示例代码如下： ``` <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElMessage } from 'element-plus'; export default { setup() { const form = ref({ username: '', password: '' }); const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] }; const submitForm = () => { const formRef = this.$refs.form; formRef.validate(valid => { if (valid) { // 表单验证通过，提交表单 // TODO: 提交表单的代码 } else { // 表单验证不通过，提示错误信息 ElMessage.error('表单验证不通过，请检查输入是否正确！'); } }); }; return { form, rules, submitForm }; } }; </script> ``` 其中，使用了 `el-form` 表单组件和 `el-form-item` 表单项组件，并设置了验证规则。在提交表单的方法中，调用了 `this.$refs.form.validate()` 方法对表单进行验证，如果验证通过，返回 `true`，否则返回 `false`。如果表单验证不通过，可以使用 `ElMessage.error()` 方法提示错误信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值