【Vue】vue动态添加表单项

一、需求背景

有一个接口需要批量修改入参，但是不固定多少个入参，不固定是哪一个。就得做一个动态添加表单项，如下面的格式params里面，一个key，一个value

参数形式如下面params，忽略pvaId。

{"pvaId":9,"params":[{"paramName":"1","paramValue":"1"},{"paramName":"2","paramValue":"2"},{"paramName":"3","paramValue":"3"},{"paramName":"4","paramValue":"4"}]}

二、实现效果

一组值是一个参数名，一个参数值，

可动态添加一组，可删除一组。

三、实现过程

3.1、html

固定打开弹窗，会显示一组参数名1，参数值1；

点击添加参数后，会在下面动态生成参数名2，参数值2.......；

点击一组参数后面的删除按钮，会动态删除该组参数，下面的下标自动向上替代删除的一个

<!-- 批量修改参数的对话框 -->
    <el-dialog :visible.sync="showModifyParametersVisible" title="批量修改参数" center customClass="customWidth" :before-close="closeDialog">
      <el-form ref="modifyParametersForm" :inline="true" :model="modifyParametersForm" >
        <el-form-item label='参数名1' prop="params[0].paramName" :rules="{
                    required: true, message: '参数名不能为空', trigger: 'blur'
                }">
          <el-input v-model="modifyParametersForm.params[0].paramName"></el-input>
        </el-form-item>
        <el-form-item label='参数值1' prop="params[0].paramValue" :rules="{
                    required: true, message: '参数值不能为空', trigger: 'blur'
                }">
          <el-input v-model="modifyParametersForm.params[0].paramValue"></el-input>
        </el-form-item>
        <el-form-item>
          <i class="el-icon-delete" style="visibility:hidden;"></i>
        </el-form-item>
        <!-- 动态增加项目 -->
        
        <div v-for="(item, index) in modifyParametersForm.params" v-if="index>=1" :key="index">
          <el-form-item :label="'参数名' + (index+1)" :prop="'params.' + index + '.paramName'" :rules="{
                    required: true, message: '参数名不能为空', trigger: 'blur'
                }">

            <el-input v-model="item.paramName"></el-input>
          </el-form-item>
          <el-form-item :label="'参数值' + (index+1)" :prop="'params.' + index + '.paramValue'" :rules="{
                    required: true, message: '参数值不能为空', trigger: 'blur'
                }">
            <el-input v-model="item.paramValue"></el-input>
          </el-form-item>

          <el-form-item>
            <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitParameForm()">提交</el-button>
        <el-button @click="addItem">添加参数</el-button>
      </div>
    </el-dialog>

3.2、data

// 批量修改入参表单
      modifyParametersForm: {
        pvaId: '',
        params: [
          {
            "paramName": '',
            "paramValue": ''
          }
        ]
      },

3.3、JS

// 批量修改参数相关接口
    // 添加一组key/value输入框
    addItem() {
      this.modifyParametersForm.params.push({
        paramName: '',
        paramValue: ''
      })
    },
    // 删除一组输入框
    deleteItem(item, index) {
      this.modifyParametersForm.params.splice(index, 1)
    },
    // 关闭批量修改参数表单
    closeDialog(){
      this.showModifyParametersVisible = false
      this.modifyParametersForm = {
        pvaId: '',
        params: [
          {
            "paramName": '',
            "paramValue": ''
          }
        ]
      }
    },
    // 提交批量修改入参表单
    submitParameForm() {
      this.$refs.modifyParametersForm.validate((valid) => {
        if (valid) {
31           updateParams(this.modifyParametersForm).then(response => {
            console.log(response.status)
            if (response.status === 1) {
              console.log('success!!')
              this.$message.success('修改入参成功！')
              // 提交后关闭弹窗，清空数据
              this.$nextTick(() => {
                this.closeDialog()
              })

            } else {
              console.log('failed')
              this.$message.error(response.message)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },