vue+elementui 表单中有个按照条件隐藏组件校验判断

最新推荐文章于 2025-04-08 15:54:06 发布

ldqwananxh

最新推荐文章于 2025-04-08 15:54:06 发布

阅读量4.9k

点赞数 1

文章标签： vue java

本文链接：https://blog.youkuaiyun.com/ldqwananxh/article/details/110734565

版权

本文介绍了在Vue+ElementUI的表单中，如何实现一个根据条件隐藏显示的下拉框组件，并对其进行动态的校验控制。当组件隐藏时，表单校验忽略；显示时，则进行校验。通过使用`!this.showRentPrise`作为条件，并自定义校验方法`validatePurchaseType`来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到了vue+elementui 表单中有个按照条件隐藏的下拉框，隐藏的时候不需要校验，显示的时候需要校验，下面代码将purchaseType隐藏显示操作，自定义验证方法validatePurchaseType 这里
!this.showRentPrise作为条件然后在判断传进来的值进行校验即可

data() {
            const validatePurchaseType = (rule, value, callback) => {
                debugger
                if (this.showRentPrise==true) {
                    if(value!=undefined && value!=null){
                        callback()
                    }else{
                        callback(new Error('请选择采购类型'))
                    }
                } else {
                    callback()
                }
            }
            return {
                showGroupLeader:false,
                //初始添加数据输入框显示隐藏
                //需求论证、履约、方案
                showPrise: false,
                //政采、非政采
                showRentPrise: false,
                。。。。。。。

addFormRules: {
                    projectNum

最低0.47元/天解锁文章