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' }
- ]
- }
来源: http://www.jianshu.com/p/c4ab3322289c