【JavaScript 】动态添加form，并两个数组组成一个一一对应的key:value对象

本文链接：https://blog.csdn.net/weixin_48200589/article/details/126154480

一：需求情况

1.一般这种页面我们都是一个List直接循环
2.然后通过动态添加来push添加新默认数据
3.但是后端需要的数据是一个对象，里面嵌套的都是对应key:value形式

在这里插入图片描述

4.因为后端给的就是两组数据并且要求传过去入参是key:value对应的对象包含多个对象形式
5.但是我们正常对接操作应该是一个list的数组对象来循环的

二：页面处理

<el-row>
   <el-col :span="10">
     <!-- 分两个字段循环 -->
     <div v-for="(material1, materialIndex) in searchParams.key" :key="materialIndex">
       <el-form-item label="">
         <el-select v-model="material1.name" style="width:140px" size="mini" placeholder="素材字段">
           <el-option v-for="item in materialArr" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
     </div>
   </el-col>
   <el-col :span="14">
     <div v-for="(material2, materialIndex) in searchParams.value" :key="materialIndex">
       <el-form-item label="">
         <el-input v-model="material2.name" style="width:140px" maxlength="30" placeholder="请填写查询条件" clearable />
         <i class="el-icon-circle-plus" @click="handlePushTest(searchParams,materialIndex)" />
         <i v-if="searchParams.key.length>1" class="el-icon-remove" @click="handleDelTest(searchParams,materialIndex)" />
       </el-form-item>
     </div>
   </el-col>
 </el-row>

1.这里我们直接通过两个数组来处理，定义数据

三：动态添加

 handlePushTest(item, index) {
      item.value.push({ })
      item.key.push({ })
    },

四：提交时候处理数据

在这里插入图片描述

async  handleTest() {
      const objKey = this.searchParams.key.map((item, index) => {
        return {
          [item.name]: this.searchParams.value[index].name
        }
      })
      this.testForm.searchParams = Object.assign({}, ...objKey)
      const params = {
        script: this.newForm.sortList.script,
        type: this.$route.query.templateId,
        searchParams: this.testForm.searchParams
      }
      try {
        const res = await sortTest(params)
        if (res.code === 0) {
          this.testRes = res.data
          this.$message.success('测试成功')
          console.log(res, 'res')
        }
      }
      catch (error) {
        this.$message.error(error)
      }
    },