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

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. 从 SGD 到 Adam —— 深度学习优化算法概览(一) 重点

    https://zhuanlan.zhihu.com/p/32626442 骆梁宸 paper插画师:poster设计师:oral slides制作人 445 人赞同了该文章 楔子 前些日在写计算数学 ...

  2. Fragment开发实战（一）

    一. Fragment的特征: 1. Fragment总是Activity界面的组成部分.Fragment可调用getActivity()方法获取它所在的Activity,Activity可调用Fra ...

  3. HTML静态网页--框架

    框架: 1.frameset frameset最外层的去掉body,直接用frameset 在超级链接指定目标页面显示在哪个框架窗口中 第一步:给要显示内容的目标frame设置name属性 第二步:给 ...

  4. Pytorch的LSTM的理解

    class torch.nn.LSTM(*args, **kwargs) 参数列表 input_size:x的特征维度 hidden_size:隐藏层的特征维度 num_layers:lstm隐层的层 ...

  5. Python--day40--threading模块

    import time from threading import Thread class MyThread(Thread): def __init__(self,arg): super().__i ...

  6. 【图数据库】史上超全面的Neo4j使用指南

    转自:https://cloud.tencent.com/developer/article/1336299 在这篇文章中: 第一章:介绍 Neo4j是什么 Neo4j的特点 Neo4j的优点 第二章 ...

  7. linux设备驱动文件结构

    struct file, 定义于 <linux/fs.h>, 是设备驱动中第二个最重要的数据结构. 注意 file 与用户空间程序的 FILE 指针没有任何关系. 一个 FILE 定义在 ...

  8. H3C DHCP中继显示及维护

  9. jieba—parallel

    jieba 并行处理进行测试,注意:并行分词仅支持默认分词器 jieba.dt 和 jieba.posseg.dt import sys import time import jieba jieba. ...

  10. SpringBoot: 浅谈文件上传和访问的坑 (MultiPartFile)

    本次的项目环境为 SpringBoot 2.0.4, JDK8.0. 服务器环境为CentOS7.0, Nginx的忘了版本. 前言 SpringBoot使用MultiPartFile接收来自表单的f ...