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)
    }
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值