elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码

一：表单一级验证

element中from组件内表单验证通过使用el-form标签，绑定model和rules属性进行表单验证

简单的表单验证很简单，在prop内绑定验证属性，然后在rules对象内定义验证方法

rules: {

belongId: [{

required: true,

message: '不能为空',

trigger: 'change'

}]

}

二：模板一次循环渲染时表单验证

v-model="item.factoryName"

clearable

filterable>

v-for="(child, ind) in factoryList"

:key="ind"

:label="child.label"

:disabled="child.disabled"

:value="child.value">

循环内模板验证prop绑定值就是一个问题了，因为它是循环出来的没办法直接写死在内，所以prop就需要动态绑定验证属性，这里需要注意一下，动态prop内绑定的是要和form内定义的属性名以及model绑定的值要对应上。比如上面prop里的factoryName，form.warehouseList里子元素也要有这个属性，select中model绑定的也应该是factoryName。因为是循环出来的，所以model绑定的就是‘i