1.1.功能需求
-
使用element的表单验证方式，动态for循环的场景的使用？
如下图所示：
1564201860(1).jpg
2 代码结构
注意：
- 循环的数组和其他表单项在同一个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' }
]
}
