el-form 加 v-if使用时出现的校验混乱的问题。

最新推荐文章于 2025-03-10 16:56:01 发布

咿口薄荷糖

最新推荐文章于 2025-03-10 16:56:01 发布

阅读量1k

点赞数 1

分类专栏： elementUi 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43936040/article/details/119776131

版权

elementUi 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在Vue.js中处理含有多个模块的页面时遇到的表单校验问题。当用户在同一页内切换不同类型的表单时，需要清空相应字段并移除验证。通过使用`this.$refs.addForm.clearValidate()`方法可以清除校验，但可能会导致校验意外触发。为避免此问题，关键在于正确声明和管理表单数据，并在v-if中为不同字段添加key以确保正确渲染。此外，确保在保存时整体校验所有字段。

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

有同页面会有选择不同的类别，页面展示页不同模块功能的需求

在这里插入图片描述

其中这整个页面的输入框和下拉选项都是套在一个form里面的。切换的时候会有表单校验突然又冒出来的情况

在这里插入图片描述

情况说明

整个页面都是套用在一个form里面，选择内部外部不同类型的时候要清空掉相应的字段。
清空相应的字段后会调用一个去掉表单验证的方法this.$refs.addForm.clearValidate();
保存的时候会整体进行校验核查一边，所以不同模块选择基本时用v-if判断显示哪个字段。

处理相应的方法

表单校验的时候要校验的字段一定要在data里先声明。不能直接写subForm: {}

		subForm: {
                supplierType: 'NB',         // 类别
                supplierCategory: 'GSZT',   // 分类
                companyId: '',              // 采购公司
                currencyId: '',             // 币种
                licensePath: '',            // 营业执照
                companyZtId: '',            // 公司账套
                remarks: '',                // 备注
                dutyNo: '',                 // 税号/身份证号
                supplierName: '',           // 供应商名称/个人名称
                userId: '',                 // 员工id
                staffDeptId: '',            // 员工id
                staffDeptName: '',          // 员工姓名
            },