elementUI动态添加表单项并添加验证

在使用elementUI动态添加表单项并添加验证的时候踩了一些坑，在此记录一下

代码：

<el-form :label-position="labelPosition" :ref="form" :model="form" label-width="120px" :inline="true" style="overflow: hidden;margin-left: 180px;margin-top: 30px">
      <el-col :span="14">
        <el-form-item label="采购类型：" prop="goods_type" :rules="rules.goods_type">
          <el-select v-model="form.goods_type" placeholder="请选择" @change="queryApprove" >
            <el-option v-for="option in typeOptions" :key="option.Value" :label="option.Text" :value="option.Value"></el-option>
          </el-select>
        </el-form-item>
        <div v-for="(item,index) in form.purchase_list">
          <el-form-item label="物品名称：" prop="goods_type" :rules="rules.goods_type">
            <el-select v-model="item.goods_name" placeholder="请选择" @change="queryApprove" >
              <el-option v-for="option in typeOptions" :key="option.Value" :label="option.Text" :value="option.Value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="text" style="margin-left:190px"  @click="deleteItems(item, index)" icon="el-icon-delete" v-show="index>0" >删除</el-button>
          </el-form-item>
          <el-form-item label="物品单价：" :prop="'purchase_list.'+index +'.goods_price'" :rules="rules.goods_price">
          <el-input-number  :min="0.1" v-model="item.goods_price"></el-input-number>
        </el-form-item>
        <el-form-item label="数量："  :prop="'purchase_list.'+index +'.goods_qty'" :rules="rules.goods_qty">
          <el-input-number  :min="1" v-model="item.goods_qty"></el-input-number>
        </el-form-item>
        </div>
        <el-form-item>
          <el-button type="text" @click="addItem" style="position: relative;left:120px"><i class="el-icon-circle-plus"></i>新增采购物品</el-button>
        </el-form-item>
        <el-form-item label="采购事由：" prop="purchase_reason" :rules="rules.purchase_reason" style="display:block;">
          <el-input type="textarea" :rows="4" v-model="form.purchase_reason" placeholder="请输入申请理由" style="width: 493px" ></el-input>
        </el-form-item>
        <el-form-item label="审批人：" prop="approve_person" :rules="rules.approve_person">
          <el-select v-model="form.approve_person" placeholder="请选择" >
            <el-option v-for="item in approveOptions" :key="item.PersonId" :label="item.Name" :value="item.PersonId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="display: block;position: relative;left:120px">
          <el-button class="submit-button" @click="submitForm(form)">提交</el-button>
        </el-form-item>
      </el-col>
    </el-form>

数据部分：

     form: {
          goods_type:'',
          purchase_list:[{
            goods_name:'',
            goods_price:'',
            goods_qty:''
          }],
          purchase_reason: '',
          approve_person:''
        },

表单验证：

rules: {
          goods_name: [
            {required: true, message: '请输入采购物品名称', trigger: 'blur' }
          ],
          goods_type: [
            { required: true, message: '请选择采购物品类型', trigger: 'change' }
          ],
          purchase_reason: [
            { required: true, message: '请输入采购事由', trigger: 'blur' },
            { min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' }
          ],
          goods_price:[
            { required: true, message: '请输入采购物品单价'},
          ],
          goods_qty:[
            { required: true, message: '请输入采购物品数量'},
          ],
          approve_person:[
            {required: true, message: '请选择审批人', trigger: 'change'}
          ]
        }

部分方法：

/*动态新增表单项*/
      addItem(){
        this.form.purchase_list.push({
          goods_name:'',
          goods_price:'',
          goods_qty:''
        })
      },
/*删除新增的表单项*/
      deleteItems(item, index) {
        this.index = this.form.purchase_list.indexOf(item);
        if (index !== -1) {
          this.form.purchase_list.splice(index, 1)
        }
      },

由于原页面是没有动态添加表单项的，在做验证的时候踩了一些坑。

首先，这里需要把prop改成:prop并且添加内容，例如：:prop="‘purchase_list.’+index +’.goods_price’" ，其中第一个参数为被循环的数组的名称，第二个参数为数组中对应的字段名称

这里注意，需要动态添加的表单项与正常表单项做验证有区别，普通表单只需要在el-form标签中指定:rules同时每个表单项的prop与验证规则中的名称一致即可。但是动态添加的表单项需要将:rules单独放在el-form-item标签中，我是直接将所有的验证都放在了el-form-item标签中，为了美观。具体代码可以参考上文