Vue+Element-UI 使用 Vform 表单设计器

1、表单设计器基础字段建议

//主键id

Int id (guid id)

//表单数据

String FormJson

//表单名称

String FormName

//表单描述

String FormDescribe

//建表时间

DateTime CreateTime

2、后台.Net Core WebApi增删改查接口照常写注意添加修改时要通过post,FromBody进行传参

3、前台vue创建之后需要先下载 npm包

3.1、npm i element-ui -S , npm install axios , npm i vform-builds

3.2、在main.js中全局注册如下图：

4、使用表单设计器创建页面配置路由在页面中引入Vform组件如图所示：

5、运行后的页面效果托拉拽控件

6、将设计好的表单保存到数据库中

6.1、点击保存按钮

6.2、触发点击事件使用axios与WebApi接口交互将设计好的表单以json的字符串的形式保存到后台数据库

6.3、使用Vform渲染页面

6.3.1、使用Vform组件渲染如图所示：

6.3.2、使用 axios 调用 WebApi 接口对组件进行赋值使用此方法

6.3.3、如果想要把你存入到数据库中表单数据进行修改要在设计组件 designer 的页面对 designer组件的 ref="vfDesigner" 进行赋值操作如上图

更多详情可查看官网：

Element-ui: Element - The world's most popular Vue UI framework

Axios: 起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

vForm: 1. 表单的状态控制 · 语雀 (yuque.com)

Vue+Element-UI 使用 Vform 表单设计器相关推荐

多款顶级好用的 Vue 表单设计器测评推荐，可拖拽生成表单
本文完整版:<多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单> Vue 表单设计器 form-generator - 适配 Element Plus UI 框架的表单设计器 f ...
基于vue Ant-Design 的表单设计器，快速开发
基于vue Ant-Design 的表单设计器,快速开发https://gitee.com/kcz66/k-form-design/ 表单设计器 k-form-design image 简介参考项目 ...
表单设计器 k-form-design
k-form-design支持自定义组件.表单联动等高级功能,使用 vue2 + CompositionAPI + ts 实现伪 vue3 应用. 设计器布局参考form-generator项目,基于 ...
基于springboot+element ui+vue的java快速开发平台，集成html5工作流设计器，flowable， element ui 表单设计器
前后端分离.maven多模块开发,方便多人协同开发后端选型:springboot2 + mybatis + shiro + jwt token + flowable 前端选型:vue + eleme ...
开源推荐：国内3大主流前端UI表单设计器，千万不要让领导知道
互联网应用架构:专注编程教学,架构,JAVA,Python,微服务,机器学习等领域,欢迎关注,一起学习. 偷得浮生半日闲,自古人生何其乐.开始之前告诉一下大家,距离国庆8天假只剩4天了,先乐呵乐呵. ...
基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间工作日志正文基于VUE的ElementUi可视化表单设计器布局器顶原码农苦码农懂发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
Antd Vue 表单生成快速开发指南，内附强大的表单设计器
之前发布了一款基于Element的表单设计器,可以快速设计和生成表单,设计器地址:http://form.making.link/.现在我可以告诉大家,Antd表单支持来了,可以使用设计器设计好表单后 ...
Vue——formcreate表单设计器自定义组件实现
form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持3个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...
vue集成Variant Form表单设计器
1.安装 npm install vform-builds 2.引入并全局注册VForm组件 import Vue from 'vue' import App from './App.vue'impo ...

Vue+Element-UI 使用 Vform 表单设计器

Vue+Element-UI 使用 Vform 表单设计器相关推荐

最新文章

热门文章