（element-ui）v-for动态数据循环表单验证的处理方式

1.1.功能需求

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

  
  
  1564201860(1).jpg

2 代码结构

注意：

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

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

3.每一个循环中的都需要加：rules

2.1 dom结构

取 消 确 定

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' }
        ]
}