element-ui 表单组件的prop属性

Posted 2023-04-15

参考技术A

Vue组件库element-ui中的Form表单组件提供了表单验证功能
通过rules属性传入验证规则
Form-Item中的prop属性设置需要校验的字段名

如图所示， el-form-item 元素的 prop 属性绑定字段名 username ，表单验证时，就会验证 el-input 元素绑定的变量 [ruleForm.username] 的值是否符合验证规则

验证规则：

在export default ，rules规则是根据prop字段名一一对应的，
每条校验规则是一个数组，[,,]

如果字段名是动态的，该如何处理，参考：
https://www.imooc.com/wenda/detail/411761

element-UI 表单校验失效处理

1.el-form-item 的 prop属性绑定的要是字符串：

  eg: :prop="‘answer[‘ + 0 + ‘]‘ "       //而不是    :prop="answer[0]"

        v-modal="ruleForm.answer[0]"

2.el-form的modal属性绑定表单数据源：后面的prop属性是fuleForm后面的字段而不是fuleForm.answer

  eg: :modal="fuleForm"