表单中使用级联选择器时遇到的表单验证问题"/>
关于 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 {}}
}
很简单的一个小功能
欢迎大佬们提出更多更好的解决方案
不喜勿喷!
不喜勿喷!
不喜勿喷!
更多推荐
关于 elementUI 表单中使用级联选择器时遇到的表单验证问题
发布评论