【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
        }
      })
    },