el-form动态表单生成

• 描述

在el-form表单中有些表单内容是动态重复显示，需要使用v-for动态循环生成。

• 步骤

1.el-form绑定的表单对象中添加一个数组，该数组用于v-for动态循环表单内容，表单对象结构如下：

form:{
//表单重非循环的字段
id:null,
nameArray:{
namefirst:null,
namesecond:null
},
//表单中循环部分的数据结构
action:[
{
key:Date.now(),
id:null,
value:null,
selectArray:[]
}
]
}

数据定义原则：动态表单中涉及的字段都应该存放在循环部分的数组中，方便对动态数据进行对应操作，比如以下几种：
（1）动态表单中有下拉框控件el-select，其上绑定一个数组，该数组应该存放进表单循环部分的数组对象中。
（2）每个动态表单中又嵌套有v-for循环的元素，v-for绑定的数组也应该存放进表单循环部分的数组对象中。
（3）动态表单数组中需要定义一个key字段，用于绑定v-for循环时的:key值，无此项设置元素渲染时会报错

2.对el-form表单循环的html代码如下：

  <el-form :model="form" :inline="true" ref="form" label-width="65px" size="medium">
         <el-form-item prop="id">
         <el-input v-model="form.id"></el-input>
          </el-form-item>
          <el-form-item prop="nameArray" required>
          <el-form-item prop="nameArray.namefirst" :rules="[{required:true,message:'请输 
           入',trigger:'blur'}]"> 
           <el-input v-model="form.nameArray.namefirst"></el-input>
           </el-form-item>
           <el-form-item>
           <el-input v-model="form.nameArray.namesecond"></el-input>
          </el-form-item>
          </el-form-item>
           <el-form-item prop="actions" :rules=:rules="[{required:true,message:'请输 
           入',trigger:'blur'}]">
           <el-button type="primary" @click="addRow">添加动作</el-button>
           <el-card v-for="(item,index) in form.actions" :key="item.key">
            <div slot="header">
             <span>标题{{index+1}}</span>
             <el-button type="primary" @click="removeRow">删除</el-button>
              <el-form-item :prop="'actions.'+index+'.id'" :rules="[{required:true,message:'请选 
             择',trigger:'blur'}]">
              <el-input v-model="item.id" @click.native="pushselectArray(index)"></el-input> 
              </el-form-item>
              <el-form-item :prop="'actions.'+index+'.value'" :rules="[{required:true,message:'请选 
             择',trigger:'blur'}]">
               <el-select v-model="item.value">
                <el-option v-for="(item1,index1) in item.selectArray"
                 :key="index1"
                 :label="item1.label"
                  :value="item1.value">
                </el-option>
               </el-select>
              </el-form-item>
            </div>
            </el-card>
           </el-form-item>
        </el-form>

解读：
（1）动态生成的表单需要添加校验规则时应使用:prop动态绑定，:rules使用行内绑定。
（2）当遇到一个对象的表单需要使用嵌套表单组合一个对象中的多个表单元素并分别为其添加校验规则。
（3）当动态表单中的el-select下拉数据也是动态生成的（根据actions对象中的id动态生成的），需要为el-input绑定点击事件，触发pushselectArray(index)函数：获取selectArray数组中的数据并赋值给对应索引的actions对象中的selectArray数组。

3.el-form表单动态添加元素和删除元素的js代码执行：

//添加动态表单
addRow(){
this.form.actions.push({
key:Date.now(),
id:null,
value:null,
selectArray:[]
})
}
//移除对应表单
remove(){
this.form.actions.splice(index,1)
}
//根据id获取el-select中selectArray数组并赋值给对应actions数据结构
pushselectArray(index){
//1.通过id号调用后台接口查找对用selectArray数据

//2.将获取的selectArray数据通过index索引赋值给对应actions数据结构中
} 

具体使用流程及案例可参考：
Vue+Element动态生成新表单并添加验证