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

先说下遇到的问题吧

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

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

html部分

<el-form-item label="地区" prop="area">
   <!-- :props="{ checkStrictly: true }" -->
  <el-cascader
    ref="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 {

		}
	}
}

---

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

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