vue开源Element UI表单设计及代码生成器

忘是亡心i 2023-02-17 05:25 9阅读 0赞

1 可视化设计器

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

*  github仓库   [https://github.com/JakHuang/form-generator][https_github.com_JakHuang_form-generator]
 *  码云仓库  [https://gitee.com/mrhj/form-generator][https_github.com_JakHuang_form-generator]
 *  演示地址 [https://mrhj.gitee.io/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-plugin]
 *  插件使用的设计器源码 [https://github.com/JakHuang/form-generator/tree/vscode-plugin][https_github.com_JakHuang_form-generator_tree_vscode-plugin]

[https_github.com_JakHuang_form-generator]: https://gitee.com/mrhj/form-generator
[https_mrhj.gitee.io_form-generator]: https://mrhj.gitee.io/form-generator/#/
[https_github.com_JakHuang_form-generator-plugin]: https://github.com/JakHuang/form-generator-plugin
[https_github.com_JakHuang_form-generator_tree_vscode-plugin]: https://github.com/JakHuang/form-generator/tree/vscode-plugin

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue + element-ui表单重置 resetFields问题（无法重置表单）

问题： elementui在重置表单时，无法使用`this.$refs['formRefVal'].resetFields()`清空表单数据; elementui ...

怼烎@/ 2024年04月18日 17:05/ 0 赞/ 91 阅读

相关 Element-UI+vue实现登录表单

ELement-UI官网，往下划便可以看到各种属性和方法 [Element - The world's most popular Vue UI framework][

小灰灰/ 2024年04月03日 07:43/ 0 赞/ 91 阅读

相关 element-ui表单验证实例

<template> <div class="main"> <div class="login"> <el-form

约定不等于承诺〃/ 2023年10月06日 17:52/ 0 赞/ 33 阅读

相关 vue element ui重置表单的方法

一.vue element ui重置表单的方法 > 1. element代码部分 rest(form) 里面的form是表单的名字 <el-form :inl

电玩女神/ 2023年09月29日 17:35/ 0 赞/ 29 阅读

相关 Vue表单生成器设计实践

前言在公司一直从事基于Vue框架后台应用的前端研发，而该类应用的页面有较多的通过表单交互来增删改查的操作，为了进行优雅的开发体验，也有感于项目当前的代码，遂封装一个更合

ゝ一世哀愁。/ 2023年06月15日 06:54/ 0 赞/ 20 阅读

相关 element-ui 表单验证

<el-form ref="form" :model="form" :rules="rules" label-width="0px" class="demo-ruleF

小鱼儿/ 2023年03月14日 13:30/ 0 赞/ 55 阅读

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

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

忘是亡心i/ 2023年02月17日 05:25/ 0 赞/ 10 阅读

相关 vue element-ui表单重置失败（解决）

1.表单要写上ref="form"来自哪个表单的数据 2.需要重置的选项必须加上prop="name"的指向 3.重置条件按钮的方法的参数必

你的名字/ 2022年05月19日 04:15/ 0 赞/ 274 阅读

相关 form generator ——Element UI表单设计及代码生成器

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

喜欢ヅ旅行/ 2021年07月25日 13:07/ 0 赞/ 1790 阅读

相关 VUE Element-ui 表单自定义验证规则

验证规则：在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误 HTML代码： <el-form :model="modifyForm"

淡淡的烟草味﹌/ 2021年07月25日 11:27/ 0 赞/ 603 阅读