Vue表单动态新增（数组里面嵌套数组）

最新推荐文章于 2023-07-07 13:53:41 发布
最新推荐文章于 2023-07-07 13:53:41 发布
阅读量3.4k 收藏 8
点赞数 2
分类专栏： 项目 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenhanhan_/article/details/120712928
版权

Vue表单动态新增（数组里面嵌套数组）

昨天做项目，后台给的接口数据，对象中含有数组，数组里面再嵌套数组，好家伙做两个数组的动态新增，瞬间懵了，好在查了资料后终于搞定了！

此处给出一部分代码段参考：
要注意 :model="“的数据绑定与 :prop=”"间的关系，可通过item传值给事件函数来动态新增、编辑or删除item。

<template>
  <div class="page-content">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="tableClose"
    >
      <el-form
        :model="addInfo"
        status-icon
        :rules="rules"
        ref="addFormRef"
        label-width="80px"
        class="demo-addInfo"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="基地id" prop="baseId">
              <el-input v-model="addInfo.baseId" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="基地名称" prop="baseName">
              <el-input v-model="addInfo.baseName"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-divider content-position="left">订单详情</el-divider>
        <el-row>
          <el-col
            :span="8"
            v-for="(item, index) in addInfo.dovecoteOutBillDtoList"
            :key="item.key"
          >
            <el-card :body-style="{ padding: '0px' }" class="card">
              <div>
                <el-row style="margin-top: 10px">
                  <el-form-item
                    :label="'鸽棚id'"
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }"
                    :prop="
                      'dovecoteOutBillDtoList.' + index + '.dovecoteNumber'
                    "
                  >
                    <el-input
                      placeholder="请输入鸽棚id"
                      v-model.number="item.dovecoteNumber"
                    ></el-input>
                  </el-form-item>
                </el-row>
                <el-row style="margin-bottom: 10px">
                  <el-col :span="12">
                    <el-button
                      style="margin-left: 60%"
                      @click="openDetail(item)"
                      type="success"
                      plain
                      icon="el-icon-edit"
                    ></el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      style="margin-left: 10%"
                      @click.prevent="removeDomain(item)"
                      type="danger"
                      icon="el-icon-delete"
                      plain
                    ></el-button>
                  </el-col>
                </el-row>
              </div>
            </el-card>
            <!-- 鸽棚详情表单区域开始 -->
            <el-dialog
              append-to-body
              :title="titleName"
              :visible.sync="dialogFrom"
              width="720px"
              :before-close="detailClose"
            >
              <el-form :model="item" label-width="80px">
                <el-row>
                  <el-col
                    :span="8"
                    v-for="(person, index) in item.dovecoteOutBaseDtoList"
                    :key="person.key"
                    style="border-bottom: 1px solid #f0f0f0; padding: 10px"
                  >
                    <el-card :body-style="{ padding: '0px' }" class="card">
                      <el-row>
                        <el-form-item
                          :label="'类型' + (index + 1)"
                          :prop="
                            '.dovecoteOutBaseDtoList.' + index + '.typeName'
                          "
                          :rules="{
                            required: true,
                            message: '类型不能为空',
                            trigger: 'blur',
                          }"
                        >
                          <el-select
                            v-model="person.typeName"
                            placeholder="请选择"
                            style="width: 100%"
                          >
                            <el-option
                              v-for="(item, index) in typeList"
                              :key="item.id"
                              :label="item.typeName"
                              :value="item.typeName"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item fixed="right">
                          <el-button
                            @click.prevent="removeDetail(item, person)"
                            type="danger"
                            icon="el-icon-delete"
                            plain
                          ></el-button>
                        </el-form-item>
                      </el-row>
                    </el-card>
                  </el-col>
                </el-row>
              </el-form>
              <el-row>
                <el-col :span="8">
                  <el-button type="primary" @click="closeDetail">保存</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button @click="addDetail(item)">新增类型</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button @click="closeDetail">关闭</el-button>
                </el-col>
              </el-row>
            </el-dialog>
            <!-- 鸽棚详情表单区域结束 -->
          </el-col>
        </el-row>
        <el-form-item>
          <el-row>
            <el-col :span="8">
              <el-button type="primary" @click="addOrderInfo('addInfo')">提交</el-button>
            </el-col>
            <el-col :span="8">
              <el-button @click="addDomain()">新增鸽棚</el-button>
            </el-col>
            <el-col :span="8">
              <el-button @click="closeform">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>


//删除item
removeDomain(item) {
      var index = this.addInfo.dovecoteOutBillDtoList.indexOf(item);
      if (index !== -1) {
        this.addInfo.dovecoteOutBillDtoList.splice(index, 1);
      }
    },
 removeDetail(item, person) {
      var index = this.addInfo.dovecoteOutBillDtoList.indexOf(item);
      var k =
        this.addInfo.dovecoteOutBillDtoList[
          index
        ].dovecoteOutBaseDtoList.indexOf(person);
      if (k !== -1) {
        this.addInfo.dovecoteOutBillDtoList[
          index
        ].dovecoteOutBaseDtoList.splice(k, 1);
      }
    },

新增通过向数组里面push对象即可。

遇到的问题：

在动态新增后遇到一个问题，就是新增多个item后点击编辑会出现同时触发打开表单事件，如何给予表单一个判断条件来绑定事件呢？
在这里插入图片描述
希望能够得到解答^^

chenhanhan_
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 动态添加表格详细讲解！
weixin_45796807的博客
01-28 4251
1、实现界面如下 2、框架Vue 3、ui框架 ant design for Vue 版本：1.7.2 4、最重要的是 数据结构分析 4、数据结构 form: { modalEndpointId: '', shareParams: [ { modelMetrics: '', modalCheck: '', modalCheckValue: '', modalCheckId: '', modal
vue的动态添加数组
技术之家 www.5ceo.cn
07-16 2万+
个人网站：www.5ceo.cn qq群： 527796869 <div v-for="(data,index) in contentList" :key="index"> <div class="div-table"> <div class="div-tr"> <div class="div-td"> ...
vue 数组添加数据
热门推荐
Now_li的博客
12-08 6万+
vue 数据添加分为三种方法：1.unshift()，2.push(),3.splice() <template> <div> <ul> <li v-for="(time,index) of listTable" :key="index" @click="copyNew(time,index)"> {{time.id}}{{time.name1}}{{time.name2}} 添加 </li> </u
vue持续往数组里添加数组
yuzheh521的博客
06-17 4813
先上图,看看原始的数组样式
数组方法(会不会改变原数组)
zhanggei的博客
09-03 2326
数组方法
vue 项目中 向数组 添加元素 的方式
YHLSunshine的博客
04-21 1万+
vue 项目中 向数组 添加元素 的方式 及合并数组的方法
vue 动态表单添加，让你的网站更具交互性
Shids_的博客
03-25 1万+
vue 动态表单添加，让你的网站更具交互性
vue elementUI 表单校验功能之数组多层嵌套
12-08
本篇文章将详细介绍如何在Vue Element UI中进行数组多层嵌套的表单校验。 当数据结构包含数组，并且数组内的对象也需要进行校验时，直接在父级`el-form`中通过`prop`属性绑定规则可能无法达到预期效果。这是因为`el...
Vue实现动态添加或者删除对象和对象数组的操作方法
10-17
在Vue.js框架中，动态添加或删除对象和对象数组是常见的需求，特别是在处理表单数据、列表展示等场景。本文将详细讲解如何在Vue项目中实现这一功能。 首先，我们来看一下添加对象到对象数组的核心代码： ```...
vue踩坑记录之数组定义和赋值问题
10-17
在Vue组件中，我们尝试初始化一个表单元素，用于显示从后台获取的有效日期范围。`data`选项中定义了一个名为`effective_date`的数组，但没有给它赋初始值。在`created`生命周期钩子中，我们调用了`getContractInfo`...
Vue 数组添加元素的三种方式
走在搬砖的路上！
07-20 1万+
1、push() 结尾添加 　　数组.push(元素) 参数 描述 newelement1 必需。要添加到数组的第一个元素。 newelement2 可选。要添加到数组的第二个元素。 newelementX 可选。可添加多个元素。 2、unshift() 头部添加 　　数组.unshift(元素) 参数 描述 newelement1 必需。向数组添加的第一个元素。 newelement2 可选。向数组添加的第二个元素。 newel
【Vue】数组添加元素的三种方式
weixin_43784341的博客
05-06 3万+
1、push() 结尾添加 数组.push(元素) var node1 = ['111','222'] var new_node = node1.push('aaa') 此时数据为 node1: ['111','222','aaa'] 2、unshift() 头部添加 数组.unshift(元素) var node1 = ['111','222'] var new_node = node1.unshift('aaa') 此时数据为 node1: ['aaa','111','222'] 3、splic
vue向一个空数组里面添加多个数组对象
最新发布
qq_50952645的博客
07-07 1401
1、在data里面顶一个空数组。
vue 往数组添加数据
qq_42552857的博客
09-06 5206
const num1=[a,s,d] const num2=[n,i,hao] for(let n of num1){ num2.push(n) } num2.push(...num1)
添加数组的几种方法
05-11 7449
1、push追加元素 push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 var arr = [1, 2, 3, 4, 5]; arr.push(6); console.log(arr); 打印结果为： [1, 2, 3, 4, 5, 6]; 2、unshift添加元素 unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度 var arr = [1, 2, 3, 4, 5]; arr.unshift (6); console.log(arr
VUE实现动态添加表单，合并提交多个表单
蓝天⊙白云的博客
11-29 2762
页面部分 <el-dialog title="新增备忘录" :visible.sync="formVisible" style="width: 2000px;margin-left: -10vh;"> <el-form :model="item.formModel" v-for="(item,index) in saveFormList" :key="item.index" label-width="100px" class="demo-dynamic" .
动态添加表单数据vue
hfyldx的博客
02-11 2211
<el-row> <el-col :span="18"> <el-form-item label="研究方向" :prop="'list.'+index+'.name'" :rules="{required:true,message:'研究方向不能为空',trigger:'blur'}"> <el-input v-model="item.name" placeholder="请输入..
Vue.js — ant-design数组表单验证
旧梦
08-21 4960
一、前言 常见的表单验证是对 对象中 单个字段的验证，那如何对数组中的每一项做到验证呢，效果如下： 二、实现 首先需要准备好 form 数据和 rules 验证规则 form: { member: [ { name: "", sex: "", age: "" } ], }, rules: { name: { required: true, message: "请输入姓名" }, sex: { required: true, message: "请选择性别"
vue 动态添加 多项目 表单_【Vue】vue动态添加表单项
weixin_39585070的博客
01-30 1146
一、需求背景有一个接口需要批量修改入参，但是不固定多少个入参，不固定是哪一个。就得做一个动态添加表单项，如下面的格式params里面，一个key，一个value参数形式如下面params，忽略pvaId。{"pvaId":9,"params":[{"paramName":"1","paramValue":"1"},{"paramName":"2","paramValue":"2"},{"param...
vue表单中动态数组怎样加验证
06-02
在 Vue 表单中对动态数组进行验证，需要在每个数组元素中添加一个 `valid` 属性，表示该元素是否有效。同时，我们需要为每个数组元素绑定一个 `v-model` 指令，将输入框中的值绑定到该元素的属性中。在提交表单时，遍历数组，检查每个数组元素的 `valid` 属性，如果有元素的 `valid` 属性为 `false`，则表单验证不通过，不能提交表单。 以下是一个示例，展示了一个动态数组的表单，其中 `items` 是一个数组，每个元素包含 `name` 和 `value` 两个属性，在输入框中输入的值将保存在 `value` 中。我们为每个数组元素添加了一个 `valid` 属性，并为每个输入框绑定了一个 `v-model` 指令，将输入框中的值绑定到该元素的 `value` 属性中。在输入框失去焦点时，调用 `validateInput` 方法验证该输入框的值是否有效，如果有效，则将该数组元素的 `valid` 属性设为 `true`，否则设为 `false`。在提交表单时，遍历数组，检查每个数组元素的 `valid` 属性，如果有元素的 `valid` 属性为 `false`，则表单验证不通过，不能提交表单。 ```html <template> <form @submit.prevent="submitForm"> <div v-for="(item, index) in items" :key="index"> <label>{{ item.name }}</label> <input type="text" v-model="item.value" @blur="validateInput(item)"> <div v-if="!item.valid" class="invalid-feedback"> 请输入有效的 {{ item.name }} </div> </div> <button type="button" @click="addItem">添加</button> <button type="submit">提交</button> </form> </template> <script> export default { data() { return { items: [{ name: "姓名", value: "", valid: false }], }; }, methods: { addItem() { // 添加一个新的数组元素 this.items.push({ name: "邮箱", value: "", valid: false }); }, submitForm() { if (this.validateForm()) { // 表单验证通过，提交表单 // ... } }, validateForm() { // 验证整个表单 return this.items.every((item) => item.valid); }, validateInput(item) { // 验证输入框内容是否有效 item.valid = Boolean(item.value.trim()); }, }, }; </script> ``` 在上述示例中，我们为每个输入框绑定了一个 `blur` 事件，该事件在输入框失去焦点时触发，调用 `validateInput` 方法验证该输入框的值是否有效。在 `validateInput` 方法中，如果输入框的值有效，则将该数组元素的 `valid` 属性设为 `true`，否则设为 `false`。在表单提交时，我们调用 `validateForm` 方法验证整个表单，该方法使用 `every` 方法遍历每个数组元素的 `valid` 属性，如果所有数组元素的 `valid` 属性都为 `true`，则返回 `true`，否则返回 `false`。在表单提交时，如果 `validateForm` 方法返回 `true`，则表单验证通过，可以提交表单。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值