关于 elementUI 表单中使用级联选择器时遇到的表单验证问题

表单中使用级联选择器时遇到的表单验证问题"/>

关于 elementUI 表单中使用级联选择器时遇到的表单验证问题

先说下遇到的问题吧

表单用使用级联选择器
在使用 this.$refs['cloudForm'].resetFields();（对该表单项进行重置，将其值重置为初始值并移除校验结果 ）之后，级联选择器无法触发表单验证

解决方法
使用 validator自定义校验规则

html部分

<el-form-item label="地区" prop="area"><!-- :props="{ checkStrictly: true }" --><el-cascaderref="cascader"style="width: 260px;":clearable="false"v-model="cloudForm.area":options="options":props="{value: 'Id',label: 'name'}"></el-cascader>
</el-form-item>

表单验证

area: [{ required: true,  validator: validArea, tirgger: 'blur' },{ type: 'array', message: '请选择地区' }
],

自定义校验

export default {data () {// 地区选择验证let validArea = (rule, value, callback) => {// 直接用value 获取不到选中的值 // 所以直接 用HTML中 v-model 绑定的值来判断 是否有值if (this.cloudForm.area.length == 0) {callback(new Error('请选择地区'))} else {callback()}}return {}}
}

很简单的一个小功能
欢迎大佬们提出更多更好的解决方案

不喜勿喷！
不喜勿喷！
不喜勿喷！