vue动态创建表单项中再次动态添加表单项

最新推荐文章于 2024-06-25 15:53:03 发布
最新推荐文章于 2024-06-25 15:53:03 发布
阅读量1.3k 收藏 4
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44447702/article/details/107934671
版权
本文介绍了一个Vue应用的需求，即在点击‘新增’按钮后，能够动态生成包含相同内容的表单项。此外，每个表单项中的时间选择器还支持通过点击加号图标来增加时间区域。
摘要由CSDN通过智能技术生成

话不多说。需求是这样的，如图
在这里插入图片描述
在这里插入图片描述
点击新增触发条件，出现相同内容，且点击选择时间中的加号图标，可增加时间区域。

<div  v-for="(item,index) in ruleForm.dynamicValidateForm" :key="index" style="margin-top:20px;">
                            <div class="form-wrapper">
                                 <!-- <el-form :model="item"> -->
                                <el-row>
                                    <el-col :span="4" style="margin-bottom:24px;">
                                        <el-select v-model="item.touchType1" placeholder="请选择触发类型"  @change="(val)=>{changeDynamicWeek1(val,item)}">
                                            <el-option label="设备触发" value="1"></el-option>
                                            <el-option label="时间触发" value="2"></el-option
最低0.47元/天 解锁文章
weixin_44447702
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue动态添加表单项
qq_21747731的专栏
04-03 1804
1. <div v-for="(item, index) in ruleForm.group" :key="'info-' + index" class="bgc"> <div class="fenFlex sellPr"> ...
关于vue中新增一组表单
Kevin李宏飞的博客
11-20 2177
朋友有个需求，vue中。点击新增，会新增一组表单。帮她写了一下。直接上代码吧。自我感觉注释的清清楚楚。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
如何在Vue3中创建一个简单的表单，并处理表单提交
最新发布
有我更精彩的博客
06-25 1060
在现代Web应用开发中，前端框架的选择对开发效率和应用性能有着重大的影响。Vue.js 作为一个渐进式JavaScript框架，以其学习曲线低、性能高及生态系统完善，被越来越多的开发者使用。在这篇文章中，我们将探讨如何在Vue 3中创建一个简单的表单，并处理表单提交。
vue 动态添加 多项目 表单_Vue中动态增加表单项的方法
weixin_39556590的博客
01-12 3091
在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。动态增加Form表单这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复操作。表单样式就不再赘述了，具体看图image.png点击添加要素按钮，就可以添加一个...
动态添加表单
weixin_42378006的博客
03-30 1106
根据项目要求要动态添加表单并能传给后台，我采用的是ant design的FormModel 表单，动态增减表单项（在最后一个例子），如下图： 下面是我的实现图，主要有三个动态表单项 看似简单的个动态添加表单项，实则工作量很大，下面上代码： <a-form-item v-for="(k,index) in reportItems" ...
动态表格添加删除
qq_28569939的博客
09-07 279
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> div { text-align: center; margin: 50px; } table { .
Vue动态添加表单项
Moon Star
01-15 1417
效果如图所示： 添加的时候，增加一个成员； 删除的时候，删除对应的成员；其他不变。 list 循环时候，key的值很重要； 如果选取 index 作为key的话，当删除成员的时候，由于index更新，使被删除的input的值仍然存在在对应index的input中。（成员1,2,3；当删除2时，成员2的值会在继续在index为2的位置（即成员3）中出现） 这里是使用 “list.length” - "index" 作为 key，每次成员数量更新的时候，length都是不同，可以保证删除成员时，其他
VUE动态生成word的实现
10-15
VUE动态生成Word文档的实现是一个涉及前端技术与文档处理技术的复杂过程，适用于Web开发领域中对文档生成功能的需求。通过使用Vue.js框架，开发者可以利用其响应式和组件化的特点，轻松构建出动态的用户界面。结合...
JavaScript动态增减表单项
01-13
动态添加表单项的步骤如下： 1. **创建新元素**：使用`document.createElement()`创建一个新的表单项元素，例如一个文本输入框。 2. **设置属性**：可以使用`.setAttribute()`方法设置新元素的属性，如`id`、`name`...
vue element动态渲染、移除表单并添加验证的实现
12-07
在Vue.js中，动态渲染和移除表单是一项常见的需求，尤其在用户需要自定义输入内容的场景下，如添加工作经历、家庭成员等。在Element UI框架中，我们可以利用其丰富的组件库来构建这样的功能。本文将详细介绍如何实现...
vue表单信息动态添加修改
06-01
接下来，我们考虑如何动态添加表单项。可以通过数组来存储表单数据，并使用`v-for`指令来渲染这些数据。例如，有一个`items`数组，每个元素代表一个表单项： ```javascript data() { return { items: [ { name: ...
vue 动态添加 多项目 表单_【Vue】vue动态添加表单项
weixin_39585070的博客
01-30 1147
一、需求背景有一个接口需要批量修改入参，但是不固定多少个入参，不固定是哪一个。就得做一个动态添加表单项，如下面的格式params里面，一个key，一个value参数形式如下面params，忽略pvaId。{"pvaId":9,"params":[{"paramName":"1","paramValue":"1"},{"paramName":"2","paramValue":"2"},{"param...
vue动态添加表单_向您的vue应用添加动态表单
weixin_26736149的博客
08-11 2535
vue动态添加表单Define form fields once, as schema, and render them anywhere! 一次将表单字段定义为架构，然后将其呈现在任何地方！ How much code does it take for you to render all forms in your application? Do you find yourself addin...
vue动态表单添加
ldqwananxh的博客
11-05 463
说一下vue 动态表单添加，查了几篇文章，照着改了改，算是原创吧，不多说上代码。展示的图是这样的 这段代码是静态的 <!-- --<el-form-item class="rules" label="评分项:" prop="moreNotifyOjbectRules.scoreItems" :rules="moreNotifyOjbectRules.scoreItems"> <el-input v-model="addForm.moreNo
vue 动态添加表单,新增表格
热门推荐
anny_mei的博客
01-09 1万+
当点击新增工作经历时,动态新增表单,并且可以点击删除当当前表单 新增的数据要以对象的形式push到数组里面去,我这里没有写校验规则会简单一些 <el-tab-pane label="工作经历" name="four"> <template> <div> <el-form ...
vue php 表单,vuejs表单数据添加到formData问题
weixin_39550486的博客
03-23 189
vuejs表单的数据怎么添加到formData？比如这里有个表单,准备用vue-resource进行ajax提交：<form><span>Message is: {{ message }}</span><br><input type="text" id="message" name="message" v-model="message" pla...
vue3——自己实现数据无限加载功能的封装
m0_57712926的博客
09-26 322
文章目录前言一、封装的意义二、如何封装？1. 准备2. 使用三、 效果演示总结 前言 本文章实现一个触底无限加载的功能，简言之就是当还有数据未加载完毕时，显示正在加载中，全部加载完毕后显示加载已完毕的一个效果。一起来看看如何实现~ 一、封装的意义 数据较多的时候，滑动滚动条显示加载状态，可以给用户很好的体验 代码维护性更好 代码可复用 二、如何封装？ 需要用到@vueuse/core中的useIntersectionObserver，用来判断元素是否出现在可视区 链接：useIntersecti
vue 动态添加 多项目 表单_vue如何动态增加表单，点击增加，多一行，并且可以删除。...
weixin_39989222的博客
12-19 518
这里的数据是这样来的！之前写过类似的是可以增加删除的，因为没有那么层。这个数据复杂起来我就不行了。在线求助各位大佬-------------------------分隔线---------------------------------------------问题已经解决，因为我在同个页面其他地方也用得到这个方法，所以我直接写了个公用增加删除方法。//这里的item.link 是 form2.ho...
使用antdesignvue和vue写一个多表单项的动态表单
04-13
好的，我可以回答这个问题。使用antdesignvue和vue可以轻松地实现一个多表单项的动态表单。您可以使用Form组件以及FormItem组件来创建表单，并使用v-for指令来循环渲染动态表单项。当您需要添加或删除表单项时，您可以使用Vue的数据绑定功能来实现。同时，可以使用antdesignvue的FormModel来实现表单验证。希望这个回答能够对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值