vue结合element自定义创建form表单

最新推荐文章于 2024-05-09 23:33:38 发布
最新推荐文章于 2024-05-09 23:33:38 发布
阅读量3.2k 收藏 5
点赞数 3
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012429102/article/details/89395830
版权

背景:在项目中需要用到大量的表单提交功能,每一个都要重新构建一个新的页面去使用,大大降低了劳动效率,

目的:在此背景下,为了能解放程序员的双手,特写了如下demo,还有功能每完善,先放个demo出来

 

接口文档:https://blog.csdn.net/u012429102/article/details/89510937

 

demo如下

 

http://fujianlijiahan.gitee.io/vue-element-form-build/#/

 

其中输入框功能是完善的,点击左侧的输入框按钮,在中间生成一个输入框后,右键点击输入框,弹出设置按钮,点击设置按钮配置相关配置项

http://fujianlijiahan.gitee.io/vue-form-build-dist/#/

约翰·塞纳
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue自定义表单生成器form-create使用详解
12-08
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。 文档 | github 演示项目: 开源的高品质微信商城 功能 自定义组件 可生成任何Vue组件 自带数据验证 轻松转换为表单组件 通过 JSON 生成表单 通过 Maker 生成表单 强大的API，可快速操作表单 双向数据绑定 事件扩展 局部更新 数据验证 栅格布局 内置组件17种常用表单组件 对比 1.x
vue自定义表单生成
晴天有何特别
04-14 881
表单生成文字发得算比较晚吧，因为最近又开始使用vue开发项目，管理系统用表单表格相当多，还是简单写了一个使用vue+element-ui，提高开发速度，增加可维护性,减少页面代码量，使用json串的方式管理表单更方便,react的也写过，思路差不多，有不清晰的地方还请指出,完整版代码没必要放太多了 index.vue 归纳需要的表单组件接收一个数组，返回一个form对象（表单值） <!-- * @name:自定义表单生成 * @Author: 刘强 * @Date: 2021-04-13 14
Vue3专栏项目 -- 二、自定义Form组件（上）
最新发布
m0_64931189的博客
05-09 1063
说到表单我们就不得不提到验证，我们需要过滤掉一系列方法的输入，最早的时候这个功能一般是在服务器端完成，假如有错误服务器会返回并且渲染一些错误，这样做费时费力，所以说在现在的web应用中，表单一般会在前端进行验证，它会适时的展示用户的问题，当没问题时就发送请求，然后后端再验证一次，我们现在还没有接入后端，所以不需要考虑点击提交以后和后端的交互功能，而是只有一个关注点，那就是表单验证。所谓表单验证是表单世界里前端最重要的一个功能，将表单验证的功能封装好也算是一个难点，接下来我们来一步步完成这个任务。
vue-自定义表单控件
tupianahz的博客
01-27 1164
题引 开发中有遇到一些非传统表单元素，如选择地址组件，开发人员需要将用户选择的最终结果转换成后台指定的格式和其他表单元素一起提交给后台，这时候，如果能像传统表单元素，如input，radio这些直接使用v-model双向绑定，那样就方便很多。 ...
vue自定义表单
weixin_42178050的博客
06-10 770
http://211.159.185.23/vue-drag-formdesign/
vue 自定义表格
YUlangML的博客
11-26 2573
数据部分 没用的地方我没挑出来。js部分没用的地方没调出来。dom部分 主要用的是。
vue+element创建动态的form表单及动态生成表格的行和列
10-16
主要介绍了vue+element创建动态的form表单及动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue+element自定义表单生成.rar
04-15
Vue.js的响应式数据绑定和计算属性等功能，结合Element UI的表单组件，可以让我们轻松创建动态、交互性强的表单。 1. **Vue.js中的数据绑定**：Vue.js的核心特性之一是双向数据绑定，通过`v-model`指令，我们可以将...
vue element自定义表单验证请求后端接口验证
12-30
做vue项目的时候遇到了一个需求，在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值。 template 账户 prop=userid> <el v-model=addForm.userid></el> 引入接口 import { checkUseridRepeat...
vue3Util:基于vue3 element-plus form表单二次封装
05-05
5. **Form表单组件**：Vue3Util可能会包含一个自定义的Form组件，这个组件可能集成了Element Plus的Form，并增加了自动绑定、验证、提交等功能，使得开发者可以更简单地创建和管理表单。 6. **自定义验证规则**：...
自定义表单（拖拽式表单）
08-16
通过拖放的方式创建表单jQuery formBuilder，基于jQuery formBuilder 略作修改，
基于elementui的数据驱动表单组件
08-12
基于element-ui的数据驱动表单组件
Vue深入-5【Vue中自定定义一个表单控件、watch】
Yesterday_Tomorrow的博客
12-10 259
(1).v-model在表单控件中 1.input控件 <input type="text" v-model="message"/> 2.select控件 <select v-model="result"> <option value="" disabled>请选择</option>//这样即可设置默认为请选择但是无法再次选择 <option v-for="subject in subjects"
Vue.js自定义事件的表单输入组件
xiechengjian的博客
01-05 1689
Vue.js使用自定义事件的表单输入组件 自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。要牢记： input v-model="something"> 这不过是以下示例的语法糖： input v-bind:value="something" v-on:input="something = $e
基于Vue构造器创建Form组件的通用解决方案
li420520的博客
11-02 2509
在前端平常的业务中，无论是官网、展示页还是后台运营系统都离不开表单，它承载了大部分的数据采集工作。所以如何更好地实现它，是平常工作中的一个重要问题。 在应用Vue框架去开发业务时，会将页面上每个独立的可视/可交互区域拆分为一个组件，再通过多个组件的自由组合来组成新的页面。例如 &lt;template&gt; &lt;header&gt;&lt;/header&gt; ... &lt;...
（简单好用）基于VUE 2 Element Ui 的Form表单组件
syc123syc123syc的博客
11-07 951
众所周知，摸鱼，偷懒，能写BUG是一个优秀前端的基本素养，Vue让前端程序员可以更加光明正大的偷懒了，组件化开发让我们可以封装一个又一个的组件，那组件肯定是得封装的方便又好用,不然怎么可以一次又一次的copy paste呢，这就给各位吴彦祖刘亦菲分享一个最近封装的表单组件，支持表单验证（可自定义），用法和Element Ui的form表单差不多但更省事更有助于咱摸鱼，收藏点赞都点点噻~ Form.vue(组件本体) 这个是组件本体直接在components里面创建文件贴进去就可以拉，使用方法在下面~
element-ui 二次封装多功能自定义form组件
qq_53675083的博客
07-09 1160
功能介绍:1.可统计form表单中选中数据的个数2.数据默认只展示一排，会根据屏幕大小适配一行放几个el-form-item，最少两个，超过一行时，会出现更多筛选按钮，点击更多筛选展示全部搜索条件，将所有el-form-item宽度同意设置成215px宽度，暴露查询 重置方法给父级效果图上代码...
Vue element 自定义表单验证（手机号举例）
热门推荐
程序猿踩坑集锦
06-29 4万+
&lt;el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"&gt; &lt;el-form-item label="手机号" prop="phone"&gt; &lt;el-input
vue+element-ui form表单中显示图片
10-08
在Vue Element-UI的表单中显示图片，你可以使用Element-UI的Upload组件来实现。 首先，你需要在表单中添加一个Upload组件，用来上传图片： ```vue <el-form> <el-form-item label="图片"> class="upload-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值