1 可视化设计器

设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中。

  • github仓库   https://github.com/JakHuang/form-generator
  • 码云仓库  https://gitee.com/mrhj/form-generator
  • 演示地址 https://mrhj.gitee.io/form-generator/#/

2 特点

  • 可视化设计表单
  • 一键生成原生的vue单页表单代码,保持100%拓展性
  • 在线编辑器修改生成的代码,并实时预览
  • 表单栅格化布局
  • 支持表单校验
  • 快速查阅组件的官方文档

3 vscode插件

在上文的设计器的基础上,封装了一个vscode插件。突破网页不能写入文件的限制。

安装插件请在vscode中搜索:

jakHuang

Form Generator Plugin

  • 插件源码  https://github.com/JakHuang/form-generator-plugin
  • 插件使用的设计器源码 https://github.com/JakHuang/form-generator/tree/vscode-plugin

vue开源Element UI表单设计及代码生成器相关推荐

  1. form generator ——Element UI表单设计及代码生成器

    form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...

  2. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

      方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...

  3. vue+element ui表单校验(邮箱、电话、工商信息)

    vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...

  4. vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)

    Element UI 表单 使用 记录 element ui 表单 input 文本域 日期选择 中国标准时间与xxxx-xx-xx格式时间之间的来回切换 中国标准时间转换为xxxx-xx-xx格式 ...

  5. element UI 表单自定义验证,css水平且垂直居中方法

    element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证 首先是element UI 提供的基础 ...

  6. 基于springboot+element ui+vue的java快速开发平台,集成html5工作流设计器,flowable, element ui 表单设计器

    前后端分离.maven多模块开发,方便多人协同开发 后端选型:springboot2 + mybatis + shiro + jwt token + flowable 前端选型:vue + eleme ...

  7. Element UI——表单验证输入的数字检测出来是string解决方案

    问题描述 打印 判断类型 问题分析 解决方案 数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...

  8. element ui 表单验证为正整数

    很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...

  9. element ui 表单验证残留提示处理

    问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 点击编辑框 解决方法:添加表单重置验证 我们可以通过为两个表单添加ref属性 之后 ...

最新文章

  1. python历年来经典项目实例-【实战案例】利用Python输出精美表格的5个案例,过程详细...
  2. 西南民大oj(矩阵快速幂)
  3. 【C 语言】内存四区原理 ( 栈内存与堆内存对比示例 | 函数返回的堆内存指针 | 函数返回的栈内存指针 )
  4. nginx文件服务器修改根目录,nginx修改配置文件更改网站根目录无效?
  5. httpclient 设置短连接_HTTP长连接、短连接使用及测试
  6. .ipynb转化为.py文件后批量删除一大堆#In[53]
  7. subprocss模块
  8. Mac 下配置XAMPP
  9. Java中的关键字有哪些?
  10. 算法设计与分析 第一章 基础知识作业1
  11. storm无损 the wolven_TheFatRat,Maisy Kay-The Storm[FLAC格式]
  12. h5打开小程序的方法 总结
  13. 中标麒麟Linux系统串口,中标麒麟操作系统串口调试方法研究-嵌入式-电子工程世界网...
  14. 亲身经历从软通外包到华为OD,两者有什么区别?
  15. 国内 Top2 高校研一在读,为什么感觉深度学习越学越懵?
  16. 左手鼠标指针_使您的鼠标指针左手友好
  17. Nature:16年前的论文生成软件SCIgen至今仍有人用,骗过同行评审,论文被接收...
  18. Linux命令中的箭头符号总结
  19. 完美解决django 在迁移数据库的时候出现的1146错误
  20. 如何通过企业微信、飞书、钉钉消息通知接收双因子认证动态密码?

热门文章

  1. Spring框架中XML配置文件注入集合(数组、LIST、MAP、SET)属性
  2. Nacos实现环境隔离
  3. php文件下载IE文件名乱码问题
  4. linux 常用指令汇总
  5. http session 基础知识
  6. 如何使用 淘宝 NPM 镜像
  7. golang 的time包之time
  8. SRM 542 DIV2
  9. js+css 使div背景图在ie6中透明
  10. 一步一步SharePoint 2007之四十八:实现Excel Service(3)——调用Excel Service