【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.......；

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

 1 <!-- 批量修改参数的对话框 -->
 2     <el-dialog :visible.sync="showModifyParametersVisible" title="批量修改参数" center customClass="customWidth" :before-close="closeDialog">
 3       <el-form ref="modifyParametersForm" :inline="true" :model="modifyParametersForm" >
 4         <el-form-item label='参数名1' prop="params[0].paramName" :rules="{
 5                     required: true, message: '参数名不能为空', trigger: 'blur'
 6                 }">
 7           <el-input v-model="modifyParametersForm.params[0].paramName"></el-input>
 8         </el-form-item>
 9         <el-form-item label='参数值1' prop="params[0].paramValue" :rules="{
10                     required: true, message: '参数值不能为空', trigger: 'blur'
11                 }">
12           <el-input v-model="modifyParametersForm.params[0].paramValue"></el-input>
13         </el-form-item>
14         <el-form-item>
15           <i class="el-icon-delete" style="visibility:hidden;"></i>
16         </el-form-item>
17         <!-- 动态增加项目 -->
18         
19         <div v-for="(item, index) in modifyParametersForm.params" v-if="index>=1" :key="index">
20           <el-form-item :label="'参数名' + (index+1)" :prop="'params.' + index + '.paramName'" :rules="{
21                     required: true, message: '参数名不能为空', trigger: 'blur'
22                 }">
23 
24             <el-input v-model="item.paramName"></el-input>
25           </el-form-item>
26           <el-form-item :label="'参数值' + (index+1)" :prop="'params.' + index + '.paramValue'" :rules="{
27                     required: true, message: '参数值不能为空', trigger: 'blur'
28                 }">
29             <el-input v-model="item.paramValue"></el-input>
30           </el-form-item>
31 
32           <el-form-item>
33             <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
34           </el-form-item>
35         </div>
36       </el-form>
37       <div slot="footer" class="dialog-footer">
38         <el-button type="primary" @click="submitParameForm()">提交</el-button>
39         <el-button @click="addItem">添加参数</el-button>
40       </div>
41     </el-dialog>

3.2、data

 1 // 批量修改入参表单
 2       modifyParametersForm: {
 3         pvaId: '',
 4         params: [
 5           {
 6             "paramName": '',
 7             "paramValue": ''
 8           }
 9         ]
10       },

3.3、JS

 1 // 批量修改参数相关接口
 2     // 添加一组key/value输入框
 3     addItem() {
 4       this.modifyParametersForm.params.push({
 5         paramName: '',
 6         paramValue: ''
 7       })
 8     },
 9     // 删除一组输入框
10     deleteItem(item, index) {
11       this.modifyParametersForm.params.splice(index, 1)
12     },
13     // 关闭批量修改参数表单
14     closeDialog(){
15       this.showModifyParametersVisible = false
16       this.modifyParametersForm = {
17         pvaId: '',
18         params: [
19           {
20             "paramName": '',
21             "paramValue": ''
22           }
23         ]
24       }
25     },
26     // 提交批量修改入参表单
27     submitParameForm() {
28       this.$refs.modifyParametersForm.validate((valid) => {
29         if (valid) {
30 31           updateParams(this.modifyParametersForm).then(response => {
32             console.log(response.status)
33             if (response.status === 1) {
34               console.log('success!!')
35               this.$message.success('修改入参成功！')
36               // 提交后关闭弹窗，清空数据
37               this.$nextTick(() => {
38                 this.closeDialog()
39               })
40 
41             } else {
42               console.log('failed')
43               this.$message.error(response.message)
44             }
45           })
46         } else {
47           console.log('error submit!!')
48           return false
49         }
50       })
51     },