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

最新推荐文章于 2023-05-15 14:04:42 发布

原创最新推荐文章于 2023-05-15 14:04:42 发布 · 3.3k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #html #html5

Vue中遇到的问题专栏收录该内容

6 篇文章

订阅专栏

在Vue.js应用中，遇到级联选择器(cascader)在调用this.$refs['cloudForm'].resetFields()后无法触发表单验证的问题。解决方法是通过自定义校验规则validator。在HTML中设置el-cascader组件，并在表单验证中定义area字段的验证规则，包括required和array类型。在自定义校验函数validArea中，检查cloudForm.area的长度来判断是否已选择地区。这个简单但实用的技巧确保了级联选择器在重置后能够正确执行验证。

先说下遇到的问题吧

表单用使用级联选择器
在使用 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 {

		}
	}
}