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下基于elementui自定义表单-后端数据设计篇
acheng
06-30 2340
{"applicant":"刘仪","department":"技术管理","startDate":"2022-11-01","startTime":"08:30","endTime":"12:30","meetRoom":"NO.4","title":"技術連絡","fd_1660786142984":"","fd_1661955389858":"","fd_1661955304719":"","id":4099124702193258500,"docNum":"HY20221008"}
【Vue实用功能】elementUI 自定义表单模板组件
weixin_44590591的博客
12-20 4254
elementUI 实现一个自定义的表单模板组件 【Vue实用功能】elementUI 自定义表单模板组件 背景：在项目开发中，我们会遇到这种需求，在管理后台添加自定义表单，在指定的页面使用定义好的表单 直接上代码：
Vue3专栏项目 -- 二、自定义Form组件（上）
最新发布
m0_64931189的博客
05-09 1063
说到表单我们就不得不提到验证，我们需要过滤掉一系列方法的输入，最早的时候这个功能一般是在服务器端完成，假如有错误服务器会返回并且渲染一些错误，这样做费时费力，所以说在现在的web应用中，表单一般会在前端进行验证，它会适时的展示用户的问题，当没问题时就发送请求，然后后端再验证一次，我们现在还没有接入后端，所以不需要考虑点击提交以后和后端的交互功能，而是只有一个关注点，那就是表单验证。所谓表单验证是表单世界里前端最重要的一个功能，将表单验证的功能封装好也算是一个难点，接下来我们来一步步完成这个任务。
vue如何实现自定义表单
热门推荐
静幽水
10-27 3万+
自定义表单是什么？ 自定义表单顾名思义就是由用户定义表单，由用户觉定标签和组件，决定要填写什么格式的数据，用过腾讯文档的收集表单的一定见过下面的页面，这就是自定义表单。 自定义表单能做什么？ 典型的使用场景是信息收集表单或者是投票表单，上面的图片会对应的生成下面的表单，由其他用户填写，从而达到收集数据的功能。 实现效果图： 效果图如下，可以自定义文本，数字，单选按钮，多选按钮，下拉框等组件： ...
Vue——formcreate表单设计器自定义组件实现(二)
小欣儿的专栏
08-04 3464
本次要实现的自定义组件是一个表格，表格在前端是个十分常见的组件，然而formcreate里面却没有内置，我翻了issues里面有大佬说可以直接用VxeTable来做，做不做内置都是一样的。于是沿着这个思路自己做了一番实践最终也实现了两个版本，一个是Element Table简易版，一个是VxeTable的高度定制。下面就具体说说实现方法，以及其中遇到的一些问题和解法。
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...
vue自定义表单生成器form-create使用详解
10-16
Vue 自定义表单生成器 `form-create` 是一个强大的工具，它允许开发者根据 JSON 参数动态地生成表单，极大地简化了复杂表单的构建过程。`form-create` 支持 Vue 的各种组件，并且提供了丰富的功能，如动态渲染、数据...
vue3Util:基于vue3 element-plus form表单二次封装
05-05
5. **Form表单组件**：Vue3Util可能会包含一个自定义的Form组件，这个组件可能集成了Element Plus的Form，并增加了自动绑定、验证、提交等功能，使得开发者可以更简单地创建和管理表单。 6. **自定义验证规则**：...
vue-自定义表单控件
tupianahz的博客
01-27 1164
题引 开发中有遇到一些非传统表单元素，如选择地址组件，开发人员需要将用户选择的最终结果转换成后台指定的格式和其他表单元素一起提交给后台，这时候，如果能像传统表单元素，如input，radio这些直接使用v-model双向绑定，那样就方便很多。 ...
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自定义表单设计器思路
acheng
03-14 3822
在Vue中，可以使用自定义组件实现表单设计器。自定义组件允许我们在Vue应用程序中创建可复用的组件。这些组件可以在多个Vue组件中使用，使我们能够将应用程序拆分成可维护的部分。为了实现表单设计器，我们将创建两个Vue组件：FormBuilder和FormRenderer。现在，我们已经了解了自定义表单设计器所需的两个Vue组件的功能。让我们开始实现它们。我们将使用Vue CLI创建一个新的Vue项目。在项目中，我们将创建两个Vue组件：FormBuilder和FormRenderer。
（简单好用）基于VUE 2 Element Ui 的Form表单组件
syc123syc123syc的博客
11-07 951
众所周知，摸鱼，偷懒，能写BUG是一个优秀前端的基本素养，Vue让前端程序员可以更加光明正大的偷懒了，组件化开发让我们可以封装一个又一个的组件，那组件肯定是得封装的方便又好用,不然怎么可以一次又一次的copy paste呢，这就给各位吴彦祖刘亦菲分享一个最近封装的表单组件，支持表单验证（可自定义），用法和Element Ui的form表单差不多但更省事更有助于咱摸鱼，收藏点赞都点点噻~ Form.vue(组件本体) 这个是组件本体直接在components里面创建文件贴进去就可以拉，使用方法在下面~
vue自定义表单生成
晴天有何特别
04-14 881
表单生成文字发得算比较晚吧，因为最近又开始使用vue开发项目，管理系统用表单表格相当多，还是简单写了一个使用vue+element-ui，提高开发速度，增加可维护性,减少页面代码量，使用json串的方式管理表单更方便,react的也写过，思路差不多，有不清晰的地方还请指出,完整版代码没必要放太多了 index.vue 归纳需要的表单组件接收一个数组，返回一个form对象（表单值） <!-- * @name:自定义表单生成 * @Author: 刘强 * @Date: 2021-04-13 14
vue2的element自定义表单(支持数据联动和表单联动)
wzp20092009的博客
01-10 1938
vue2关于element自定义表单实现，支持数据联动和表单联动
【vue】elmentUI封装自定义表单组件
weixin_42575720的博客
07-31 1385
【vue】elmentUI封装自定义表单组件
vue+element，form循环嵌套表单 、动态添加表单、嵌套表单自定义校验规则
minmin_web的博客
12-28 5005
动态嵌套校验的难点主要是如何绑定prop属性，自定义方法的难点主要是如何在嵌套的基础上设置自定义方法以及如何将v-for的索引传入校验
vue+element-ui form表单中显示图片
10-08
在Vue Element-UI的表单中显示图片，你可以使用Element-UI的Upload组件来实现。 首先，你需要在表单中添加一个Upload组件，用来上传图片： ```vue <template> <el-form> <el-form-item label="图片"> <el-upload class="upload-demo" action="/upload" // 这里需要填写图片上传的接口地址 :show-file-list="false" :on-success="handleSuccess" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> <img v-if="imageUrl" :src="imageUrl" style="max-width: 200px; max-height: 200px;" /> </el-form-item> </el-form> </template> <script> export default { data() { return { imageUrl: '' // 用来存储图片的URL } }, methods: { handleSuccess(response, file) { // 在上传成功后，将返回的图片URL赋值给imageUrl this.imageUrl = response.url; } } } </script> <style> .upload-demo { border: 1px dashed #ccc; border-radius: 6px; padding: 20px; text-align: center; } </style> ``` 在上述代码中，我们使用了`el-upload`组件来实现图片的上传功能。在上传成功后，会调用`handleSuccess`方法，将返回的图片URL赋值给`imageUrl`，然后在页面上使用`img`标签来显示图片。 请注意，你需要将`action`属性设置为你自己的图片上传接口地址。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值