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

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. html选择题

    1.下面关于css样式和html样式的不同之处说法正确的是(A) A.html样式只影响应用它的文本和使用所选html样式创建的文本 B.css样式只可以设置文字字体样式        不仅仅能够设置 ...

  2. H3C 数据封装与解封装

  3. HDU 2717 宽搜第一题、

    题意:求n到k的最小路径,  n有三种变法 n+1,n-1或者2*n: 贴个广搜的模版在这里把.... 总结一下:一般涉及到求最短路的话用宽搜 #include<iostream> #in ...

  4. codeforces 615A

    题意:给你m个编号为1到m的灯泡:然后n行中每一行的第一个数给出打开灯泡的个数xi 然后是yij是每个灯泡的编号: 题目中有一句话. 我愣是没看,因为我英语真的是一窍不通,看了也白看,直接看数据做的, ...

  5. uni-app 生命周期函数

    应用生命周期 函数名 说明 onLaunch 当uni-app 初始化完成时触发(全局只触发一次) onShow 当 uni-app 启动,或从后台进入前台显示 onHide 当 uni-app 从前 ...

  6. Vue 项目构建完成 ----发布项目

    发布项目 cmd  命令行 npm run build      执行打包文件 完成后就会有  3 个文件夹    分别是: 文件夹 :build     config      dist    in ...

  7. win10下,cmd,power shell设置默认编码为‘UTF-8’?

    这个问题可以终结了,最新版 Windows 10 支持 UTF-8 了.打开这个选项,cmd 和 powershell 默认就是 UTF-8 了.在控制面板-时钟和区域-区域-管理-更改系统区域设置( ...

  8. 【9307】&【a303】过河卒(NOIP2002)

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 如图,A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右. 同时在棋盘上的任一点有一个对方 ...

  9. Js 时间戳显示和计算时间间隔

    显示时间戳 很多地方会让页面显示当前时间并实时计时功能,例:2019年5月23号 10:28::34 代码实现如下: getTime(){ var mydate = new Date(); var y ...

  10. element 树形控件使用

    <el-tree :data="morkDataList" show-checkbox ref="tree" node-key="id" ...