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

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. 解决某些手机RadioGroup中的RadioButton不居中（右移）问题

    最近一直在忙一个项目,页面的基本框架类似于QQ那样,有底部导航栏的,遂采用的是RadioButton来实现的.本来一直在我的模拟器上测试,页面展示是没啥问题的,效果图如下: 可是,坑爹的事今天却发生了 ...

  2. Roslyn 静态分析

    本文告诉大家如何使用 Roslyn 分析代码 首先创建一个项目,项目使用.net Framework 4.6.2 ,控制台项目.然后需要安装一些需要的库 Nuget 安装 打开 Nuget 安装下面两 ...

  3. Vue 属性绑定v-bing 事件绑定v-on

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Layout 实现三栏布局的几种方法

    https://github.com/ljianshu/Blog/issues/14    布局参考 https://github.com/ljianshu/Blog/issues/38  响应式那点 ...

  5. 微信小程序之在线试题（1）

    最近在做一套公司的市场化培训项目,涉及到手机端在线答题的设计,首先摒弃app的模式,那就只剩下微信公众号和小程序,而公众号是可以关联小程序,所以我们只需要做好一套小程序. 因为篇幅问题,下面只讲解在线 ...

  6. CSU 2005: Nearest Maintenance Point（Dijkstra + bitset）

    Description A county consists of n cities (labeled 1, 2, …, n) connected by some bidirectional roads ...

  7. vue-learning：12-vue获取模板内容的方式

    vue获取模板内容的方式 目录 outerHTML获取内容 template属性获取内容 ES6的字符串模板 <template>标签 <srcipt type="text ...

  8. 用C++获取屏幕上某点的颜色

    假定坐标点 x=50,y=50. 输出 RGB 用 16 进制数.Afxwin.h 你建项目时可得.#include <Afxwin.h>#include <Windows.h> ...

  9. C++动态数组中的C6385, C6386警告

    警告 C6385 从“m”中读取的数据无效: 可读大小为“col*sizeof(int)”个字节,但可能读取了“8”个字节. 警告 C6386 写入到“m”时缓冲区溢出: 可写大小为“col*size ...

  10. LightOJ - 1265 Island of Survival (概率dp)

    You are in a reality show, and the show is way too real that they threw into an island. Only two kin ...