在日常的开发工作中，表单开发是较为繁琐且重复的。本文介绍一个我自己写的，提高开发效率的小工具。

1 可视化设计器

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

2 特点

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

3 vscode插件

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

安装插件请在vscode中搜索：

jakHuang
或
Form Generator Plugin

5 交流

  • QQ群 976154366

关于前端和web开发的相关的问题都欢迎哦

vue开源Element UI表单设计及代码生成器的更多相关文章

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

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

  2. (vue.js)element ui 表单重置

    el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...

  3. vue踩坑：vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  4. 循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  5. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  6. Element Form表单实践（下）

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  7. UI表单

    Monk.UI表单美化插件诞生记!   阅读目录 背景 预览效果 表单组件 普通文本框 多行文本框 复选框 切换滑块 单选框 下拉选择框 数字输入框 时间选择 文件选择 显示文本 按钮 开源地址 背景 ...

  8. UX设计秘诀之注册表单设计，细节决定成败

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...

  9. Rails-Treasure chest1 (自定义Model网址;多语言包; 时区设置, TimeZone类; 格式日期时间; 表单单选UI; 表单多选UI;Select2 Plugin)

    自定义Model网址: 随机值网址SecureRandom.base58 多语言包, 包括默认语言设置和user自设置. 时区设置, TimeZone类 ,增加user自选时区功能 格式日期时间: x ...

随机推荐

  1. 各种浏览器的兼容css

    http://blog.csdn.net/wyx100/article/details/50450728 1.Mozilla内核[css]元素选择器{-moz-transition:运动的样式 持续时 ...

  2. hdu 1255 覆盖的面积 (Bruceforce)

    Problem - 1255 暴力统计覆盖超过一次的区域.1y. 代码如下: #include <cstdio> #include <cstring> #include < ...

  3. HTML--表格与表单

    一.表格 <table></table>表格 width:宽度.可以用像素或百分比表示. 常用960像素. border:边框,常用值为0. cellpadding:内容跟边框 ...

  4. [转]swagger2 入门教程

    swagger2 是一个规范和完整的框架,用于生成.描述.调用和可视化Restful风格的web服务,现在我们使用spring boot 整合它 作用: 1.接口的文档在线自动生成 2.功能测试 先介 ...

  5. ios9.3.3版本下 document.execCommand("copy") 失败

    copyText()安卓,ios11,ios12都可用 ,并且不弹起输入键盘 // 复制copyText function copyText(text) { var input = document. ...

  6. JS 复制文本兼容移动端 iOS & android

    有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设置为 `type="hidden&quo ...

  7. PHP 面试题二

    1.抓取远程图片到本地,你会用什么函数? fsockopen, A 2.用最少的代码写一个求3值最大值的函数. function get_max($a,$b,$c) { return ($a > ...

  8. mybatis查询无结果, 数据库运行相同sql查询出结果

    一.问题描述 mybatis查询无结果, 数据库运行相同sql查询出结果, 如下 这是数据库记录 这是mybatis查询出的结果, 记录条数0 这是直接将控制台一模一样的sql查询语句放到Navica ...

  9. sublime text3神器插件

    (首先安装)Package Control  Package Control,就像 Linux 下的 apt-get 和 yum 一样,它是 Sublime Text 的包管理器 1.Emmet 是一 ...

  10. H3C 环路避免机制二：水平分割