本文主要是介绍el-form 根据数组动态渲染的el-form-item必填校验绑定，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
需求：可手动动态添加的输入框，有必填校验
代码：这里模拟电话必填，
注意：1，el-from必须绑定数据：下例（：model=form;
2,el-form-item必须绑定prop:下例（:prop="data.' + i + '.number' "；因为这里是数组渲染的，需要index辅助确认唯一，注意和input的内容对应上。
3，必填校验的key要和绑定的数据key值对应，这里因为数据不多且懒得多写，直接写在template里面了：下例（:rules="[{ required: true, message: '电话号码', trigger: 'blur' }]"；
4，以上都不是我一直出错的原因，我出错的原因是：data字段是单独引入的，没有和form数据对应~~注意校验是针对form表单的，所以在input的输入框加了change事件，及时同步form数据。
<el-form :model="form" class="fromClass" ref="formRef"><el-row v-for="(item, index) in data" :key="index"><el-col :span="8"><el-form-item :label="'名字' + (index + 1)"><el-input v-model="item['name']"/></el-form-item></el-col><el-col :span="8"><el-form-item label="住址" class="alignRight"><el-input v-model="item['adress']"/></el-form-item></el-col><el-col :span="7"><el-form-item label="电话" class="alignRight labelWidth120" :prop="'data.' + index + '.number'":rules="[{ required: true, message: '电话号码必填', trigger: 'blur' }]"><el-input v-model="item['number']" @change="handleChange" /></el-form-item></el-col><el-col :span="1"><div class="dis-btn" @click="addDis" ><img :src="getImageUrl('add1')" alt="choose" ></div><div class="dis-btn" @click="delDis(i)"><img :src="getImageUrl('del1')" alt="choose"></div></el-col></el-row></el-form>这篇关于el-form 根据数组动态渲染的el-form-item必填校验绑定的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
