element表单动态生成多个表单项,并验证_elementui form表单 动态生成多个表单共用一个规则

项目中有需求,一行显示多个表单项,同时,这些表单项要支持动态增加与验证,实现效果如下:

点击右侧的加号就会生成一行部门数据,并支持删除与验证.

实现思路是:

一行展示多个表单项,使用layout布局实现(即el-row与el-col);

动态添加行,通过for循环div来实现;

主要的问题是验证,参考官网的例子,需要动态设置prop,并在单个表单项中添加验证,例子如下:

 只不过官网是新增的一个表单项,我们是三个.

整合之后,具体的实现代码如下:

<el-form :model="form" :rules="rules" label-width="80px">
      <!--省略,其他表单项-->
       <el-row class="row" v-for="(item,index) in form.bms" :key="index">
         <label for="td" class="el-form-item__label label" style="width: 80px;" :style="{visibility:index===0?'visible':'hidden'}">部门</label><!--设置动态标签,只在部门第一行显示-->
         <el-col :span="6">
          <el-form-item :prop="'bms.'+index+'.bm'"
          :rules="{
            required: true, message: '请选择部门', trigger: 'blur'
          }">
          <el-select class="input" v-model="item.bm">
            <el-option v-for="item in deptList" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
          </el-form-item>
         </el-col>
         <el-col :span="6">
          <el-form-item :prop="'bms.'+index+'.bmrs'"
          :rules="{
            required: true, message: '请输入人数', trigger: 'blur'
          }">
            <el-input class="input" v-model="item.bmrs" type="number" placeholder="人数"></el-input>
          </el-form-item>
         </el-col>
         <el-col :span="6">
          <el-form-item :prop="'bms.'+index+'.bz'">
            <el-input class="input" v-model="item.bz" placeholder="备注"></el-input>
            
          </el-form-item>
         </el-col>
         <el-col :span="1">
            <i class="el-icon-circle-plus" @click="addDept"></i>
            <i v-if="form.bms.length>1" class="el-icon-remove-outline" @click="delDept(index)"></i>
         </el-col>
       </el-row>
       <!--省略,其他表单项-->
     </el-form>

注意: for循环的key值不要使用item中的值 ,否则会导致每次输入都会重新更新视图,导致输入框没输入一个字符就会失去焦点

表单数据:

form:{
        td:"",
        bms:[{bm:"",bmrs:"",bz:""}],//默认展示一行部门数据
        rs:""
      }

动态新增与删除行的方法:

addDept(){
  this.form.bms.push({bm:"",bmrs:"",bz:""});
},
delDept(index){
  this.form.bms.splice(index,1);
}