vue动态添加表单项

vue动态添加表单项

效果图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/9ef2
bee94f44055bfa4e7d86e1b4bbf.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAc2luYXRfMjcyMDIwNDE=,size_20,color_FFFFFF,t_70,g_se,x_16)

功能说

默认进来显示一行，并且第一行显示添加按钮，其他行后面显示删除按钮，点击删除默认删除该行数据

代码实现

    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="keyRegionformRef" :model="keyRegionform" :rules="rules" label-width="108px">
       <el-row :gutter="24"  v-for="(item, index) in keyRegionform.monitors" :key="index">
         <el-col :span="11">
           <el-form-item label="监测事项"
                         :prop="'monitors.' + index + '.monitorItems'"
                         :rules="{required: true, message: '监测事项不能为空', trigger: 'blur'}">
             <el-select v-model="item.monitorItems" placeholder="请选择">
               <el-option
                 v-for="dict in itemsOptions"
                 :key="dict.dictValue"
                 :label="dict.dictLabel"
                 :value="dict.dictValue"
               ></el-option>
             </el-select>
           </el-form-item>
         </el-col >
         <el-col :span="11">
           <el-form-item  label="选择监测设备"
             :prop="'monitors.' + index + '.monitorDevice'"
             :rules="[{required: true, message: '监测设备不能为空', trigger: 'blur'}]"
           >
             <el-input  v-model="item.monitorDevice" placeholder="选择设备" maxlength="100" show-word-limit/>
           </el-form-item>
         </el-col >
         <el-col :span="2" v-if="index !== 0" >
           <i  @click="deleteMonitor(item)"
               class="el-icon-delete"></i>
         </el-col>
         <el-col :span="2" v-if="index == 0">
           <el-button
             size="mini"
             type="text"
             @click="addMonitor()"
           >添加</el-button>
         </el-col 
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

data

// 表单参数
      keyRegionform: {
        monitors:[
          {
            monitorItems:'',
            monitorDevice:''
          }
        ]
      },
     

js部分：
如果有表单重置类似的方法，也不要忘了加上对应的数组，如：

  reset() {
      this.keyRegionform = {
        keyregionId: null,
        keyregionName: null,
        monitors:[
          {
            monitorItems:'',
            monitorDevice:''
          }
        ]
      };
      this.dateRange = [];
      this.resetForm("form");
    },

修改按钮的方法，需要回显原来的数据，并且可以新增，开发的时候修改出现了问题，就是回显正常，但是点击添加按钮的时候，不会增加表单项，后来发现是修改方法出现了问题，如下：

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const keyregionId = row.keyregionId || this.ids
      getKeyregion(keyregionId).then(response => {
        this.keyRegionform = response.data;//貌似这里出现了问题，把原来带有monitors的keyRegionform给重置了，就没有monitors他了，我自己是这么想的，
        this.keyRegionform.monitors=response.data.relations;
        this.open = true;
        this.title = "修改重点区域";
      });
    },

后来修改为：

   /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const keyregionId = row.keyregionId || this.ids
      getKeyregion(keyregionId).then(response => {
      //不重置this.keyRegionform，而是把它里面的属性一一赋值
        this.keyRegionform.keyregionId = response.data.keyregionId;
        this.keyRegionform.keyregionName = response.data.keyregionName;
        this.keyRegionform.deptName = response.data.deptName;
        this.keyRegionform.deptName = response.data.deptId;
        this.keyRegionform.remark = response.data.remark;
        this.keyRegionform.monitors=response.data.relations;
        this.open = true;
        this.title = "修改重点区域";
      });
    },

增加按钮和修改按钮，如下：

   addMonitor(){
      this.keyRegionform.monitors.push({
        monitorItems: '',
        monitorDevice: ''
      })
    },

    deleteMonitor (item, index) {
      const key = this.keyRegionform.monitors.indexOf(item)
      this.keyRegionform.monitors.splice(key, 1)
    }