vue项目中动态创建输入框功能（项目实战）

vue项目中动态创建输入框功能，并返回指定数据格式

可乐加冰^

4539人浏览 · 2022-07-19 18:01:36

可乐加冰^ · 2022-07-19 18:01:36 发布

最近遇到一个需求需要在form表单中动态的创建input输入框，需要在原有的输入框后添加两个按钮用来新增和删除输入框，同时进行数据传输，不废话，上代码，结构如下

<div v-if="form.EqTypeCode == '6'" class="addDialog">
   <div style="width:100%;display:flex;align-content: space-around;flex-wrap: wrap;">
      <el-form-item label="* 支路1空开容量(A)" style="width:48%">
        <el-input type='number' v-model="dtArray.ACCHC_Rac"></el-input>
      </el-form-item>
      <el-form-item :label="'* 支路'+(item.index+1)+'空开容量(A)'" style="width:48%;" v-for="(item, index) in this.ACCHC_Rac_Arr" :key="index">
        <el-input type='number' v-model="item.ACCHC_Rac"></el-input>
      </el-form-item>
   </div>
   <el-button size="mini" style="margin-left:30px;" @click="addACCHC_Rac">添加支路</el-button>
   <el-button size="mini" style="margin-left:30px;" @click="delACCHC_Rac">删除支路</el-button>
</div>

需要创建几个数组用来保存传入的数据

      dtArray:{},
      ACCHC_Rac_Arr:[

      ],
      ACPDC_Rac_Arr:[

      ],
      DCCHC_Rac_Arr:[

      ],

此功能最核心的地方就在于如何去通过修改数据，动态的添加或删除
首先对数组的长度进行限制，每点击一次在数组中push一条对象，这样就完成了动态的创建

// 动态创建
addACCHC_Rac(){
  if (this.ACCHC_Rac_Arr.length >= 71) {
     this.$message.error('支路不能大于72')
  }else{
     this.ACCHC_Rac_Arr.push({index:this.ACCHC_Rac_Arr.length+1, ACCHC_Rac:""})
     this.dtArray.ACCHC_Arr = this.ACCHC_Rac_Arr;
  }
},

在数组中创建完对象后，我们需要在点击保存时，创建所需要格式的数据，这里我是将this.ACCHC_Rac_Arr数组传到了所需要返回的对象中，根据此时数组的长度动态去创建相应的对象元素，保存代码如下：

if (this.form.EqTypeCode == "6") {
    for (let i = 0; i < this.dtArray.ACCHC_Arr.length; i++) {
       this.dtArray['ACCHC_Rac'+(i+2)] = this.dtArray.ACCHC_Arr[i].ACCHC_Rac;
	}
} else if(this.form.EqTypeCode == "5"){
    for (let i = 0; i < this.dtArray.ACPDC_Arr.length; i++) {
       this.dtArray['ACPDC_Rac'+(i+2)] = this.dtArray.ACPDC_Arr[i].ACPDC_Rac;
    }
} else if(this.form.EqTypeCode == "7"){
    for (let i = 0; i < this.dtArray.DCCHC_Arr.length; i++) {
       this.dtArray['DCCHC_Rac'+(i+2)] = this.dtArray.DCCHC_Arr[i].DCCHC_Rac;
    }
}

效果与数据格式如下：
请添加图片描述

保存后的数据，保证ACCHC_Arr数组的长度与动态生成的元素个数相等

在删除的时候就比较麻烦了，由于我需要返回的数据是一个转成字符串的json数组，在删除的时候不能单独的去删除数组的对象，如果只通过ACCHC_Arr数组长度去给他创建新元素的话会导致在数组长度变短时，新增的对象元素无法删除，这样我们就要新增一个数组对需要删除的元素进行比较，代码如下：

delACCHC_Rac(){
   this.ACCHC_Rac_Arr.pop();
   this.dtArray.ACCHC_Arr = this.ACCHC_Rac_Arr
   Object.keys(this.dtArray)
     let dtObj = Object.keys(this.dtArray)
     let dtArr = [];         
     dtObj.forEach(item => {
	     if (item.startsWith('ACCHC_Rac')) {
	        dtArr.push(item)
	     }
      });
         if (this.dtArray.ACCHC_Arr.length < dtArr.length - 1) {
            Reflect.deleteProperty(this.dtArray,dtArr.at(-1))
         }
},

将对象中的所有key提取出来与数组的长度进行比较，删除掉所需要的一项
到这里所需要的点击生成或删除功能就完成了，再点击保存的时候，将我们需要返回的对象转为字符串传给后端就完事了

在这里放一下完整功能代码：

    // 添加
    addACCHC_Rac(){
      if (this.ACCHC_Rac_Arr.length >= 71) {
        this.$message.error('支路不能大于72')
      }else{
        this.ACCHC_Rac_Arr.push({index:this.ACCHC_Rac_Arr.length+1, ACCHC_Rac:""})
        this.dtArray.ACCHC_Arr = this.ACCHC_Rac_Arr;
      }
      console.log(this.dtArray);
    },
    // 删除
    delACCHC_Rac(){
        this.ACCHC_Rac_Arr.pop();
        this.dtArray.ACCHC_Arr = this.ACCHC_Rac_Arr
        Object.keys(this.dtArray)
          let dtObj = Object.keys(this.dtArray)
          let dtArr = [];         
          dtObj.forEach(item => {
            if (item.startsWith('ACCHC_Rac')) {
              dtArr.push(item)
            }
          });
          if (this.dtArray.ACCHC_Arr.length < dtArr.length - 1) {
            Reflect.deleteProperty(this.dtArray,dtArr.at(-1))
          }
    },
     /**
      保存提交
     */
    onSubmit() {
      this.form.relateEqIds = this.glArray;
      this.$refs['form'].validate((valid)=>{
        if(valid){
          const loading = this.$loading({
              text: '操作中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
          });
          if(this.AcquisitionShunts.length > 0){
            this.dtArray.AcquisitionShunts = this.AcquisitionShunts.toString();
          }
          if (this.form.EqTypeCode == "6") {
            for (let i = 0; i < this.dtArray.ACCHC_Arr.length; i++) {
             this.dtArray['ACCHC_Rac'+(i+2)] = this.dtArray.ACCHC_Arr[i].ACCHC_Rac;
            }
          } else if(this.form.EqTypeCode == "5"){
            for (let i = 0; i < this.dtArray.ACPDC_Arr.length; i++) {
              this.dtArray['ACPDC_Rac'+(i+2)] = this.dtArray.ACPDC_Arr[i].ACPDC_Rac;
            }
          } else if(this.form.EqTypeCode == "7"){
            for (let i = 0; i < this.dtArray.DCCHC_Arr.length; i++) {
              this.dtArray['DCCHC_Rac'+(i+2)] = this.dtArray.DCCHC_Arr[i].DCCHC_Rac;
            }
          }
          this.form.ExtendField = JSON.stringify(this.dtArray);

          Api.saveEquipment(this.$store.getters.token,this.form).then(res=>{
            if(res.Result){
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.treeGetId(this.treeId);
              this.addTableVisible = false;
            }else{
              this.$message.error('添加失败');
              console.log(res);
            }
            loading.close();
          }).catch(e=>{
            this.$message.error('添加失败');
            loading.close();
          });
        }
      });
    },