elment验证无效及表单数据无法赋值问题

最近在element的使用中发现自己对它的了解很粗糙。

首先在表单中我们要注意form的定义

 

let form = {str:''}
//true

let form = {}
form.str = ''
//false

验证：

在写了rule，prop和定义了绑定form之后

是根据rule来进行验证，验证的东西是form[prop]的值，不是你单独绑定的值

 

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
    <el-form-item label="权限单位" prop="permissionOrg">
        <el-cascader
            change-on-select="true"
            :options="deptCascader"
            @change="handleChange"
            :props="cityProps"
            class="nm-input"
            v-model= "permissionOrgStr"
            :show-all-levels="false">
        </el-cascader>
   </el-form-item>
</el-form>

验证ruleForm.permissionOrg而不是permissionOrgStr

在这种情况下可以用watch来对permissionOrgStr进行监听。

watch: {
     permissionOrgStr:function(val,oldval){
         this.ruleForm.permissionOrg = val[val.length-1];
     }
},