我们通常认为,prop 属性是我们需要进行表单校验的时候使用的。但是当我们进行一些比较复杂的校验的时候,对 prop 的理解太浅就会使我们感到头疼:prop 属性究竟做了些什么?

element-ui 的 prop 属性

官网的解释有些拗口,用人话来说就是:prop 属性让你的校验规则和数据匹配。

<el-form :model="ruleForm" :rules="rules">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
      };
    }
  }
</script>

以上的一个简单的例子可以告诉我们:prop 属性绑定了字段名 name,在表单验证时,就会找到其内部的表单组件绑定的变量 ruleForm.name 的值是否符合 rules 中与 name 对应的验证规则

所以,在进行简单的校验时,把 prop 的属性值设置为需要校验的字段名即可

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐