1.1.功能需求

• 使用element的表单验证方式，动态for循环的场景的使用？
  如下图所示：

  
  
  1564201860(1).jpg

2 代码结构

注意：

1. 循环的数组和其他表单项在同一个form表单中

2.prop改为：prop，形式为'userList.'+index+'.name'

3.每一个循环中的<el-form-item>都需要加：rules

2.1 dom结构

 <div>
  <el-form :model="normChild" ref="normSub">
    <el-form-item :label-width="formLabelWidth" :rules="rules.ParkPrice" label="30分钟内价格" prop="ParkPrice">
      <el-input v-model="normChild.ParkPrice" type="number" placeholder="价格（元）"/>
    </el-form-item>
    <div v-for="(item, index) in normChild.Prices" :key="index"  class="el-form-add">
      <el-form-item :label-width="formLabelWidth" label="开始时间（时）"
       :rules="rules.Start"  :prop="'Prices.'+ index +'.Start'">
        <el-input ref="valStart" v-model.number="item.Start" autocomplete="off" placeholder="时"/>
       </el-form-item>
       <el-form-item :label-width="formLabelWidth" label="结束时间（时）" :rules="rules.End"  
        :prop="'Prices.'+ index +'.End'">
          <el-input ref="valEnd" v-model.number="item.End" placeholder="时"/>
       </el-form-item>
        <el-form-item :label-width="formLabelWidth" :rules="rules.Price"  :prop="'Prices.'+ index +'.Price'" label="单价（元）">
          <el-input ref="valPrice" v-model="item.Price" type="number" placeholder="元"/>
        </el-form-item>
     </div>
   </el-form>
    </div>
    <el-button :span="4" type="primary" icon="el-icon-plus" 
      style="margin-right: 15px; float: right" circle title="在最后添加一条" @click="append"/>
    <el-button type="danger" icon="el-icon-delete" circle title="移除最后一条信息"
     @click="remove"/>
  </div>
   <div slot="footer" class="dialog-footer">
  <el-button @click="normCan">取 消</el-button>
  <el-button type="primary" @click="normSub('normSub')">确 定</el-button>
  </div>

2.2 data数据

normChild: {
        'ParkingId': null, // 停车id
        'ParkPrice': null, // 30分钟价格
        // 小时收费价格
        'Prices': [
          {
            'Start': null,
            'End': null,
            'Price': null
          }
        ]
      },

2.3 rules验证规则

rules: {
        Start: [
          { required: true, message: '开始时间不能为空' },
          { type: 'number', message: '开始时间必须为数字值' }
        ],
        End: [
          { required: true, message: '结束时间不能为空' },
          { type: 'number', message: '结束时间必须为数字值' }
        ],
        Price: [
          { required: true, message: '单价不能为空' }
        ],
        ParkPrice: [
          { required: true, message: '请输入30分钟内停车单价', trigger: 'blur' }
        ]
}