爱购网,微信公共账号,一舟书库
最近在项目中遇到了一个需求，需要动态增减表单元素，同时给新增的表单元素增加校验规则。
element-ui官网给出了解决方案：点击新增按钮时，向循环渲染的数组中push新的对象，数据驱动视图，通过增加数据的方式来增加新的dom元素；同样的，通过删除循环遍历的数据来达到删除dom的效果。
但是，校验规则不起作用，即使填写了表单已经提示未填写。在仔细检查后发现，element-ui的表单校验规则中，el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。但和通常表单不同的是，该表单是动态增减的，对应el-form-item需要绑定的prop值必须带上遍历的索引值index:
我要评论<el-form ref="..." :model="test">
<div v-for="(item, index) in test.line" :key="index">
<el-form-item :prop="'line.'+index+'.value1'" :rules="{...}">
<el-input v-model="item.value1"></el-input>
</el-form-item>
<el-form-item :prop="'line.'+index+'.value2'" :rules="{...}">
<el-input v-model="item.value2"></el-input>
</el-form-item>
<div>
</el-form>
<script>
export default {
data() {
return {
test: {
...,
line: [{
value1: '',
value2: ''
}]
}
}
}
}
</script>
完整代码见element-ui官网的动态增减表单项
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论