项目场景：

今天在做页面的时候，需要含有两个form表单，表单的内容以及验证信息的重置。

问题描述

因为两个表单绑定的字段有些重复，并同时要设置必选项，导致当一个表单标红，关闭后还是回显红色，并且另一个表单也受到了影响。然后排查了好久才解决。

原因分析：

1、v-model 绑定的数据要和上面的prop的名称不一致

2、type类型不一致

3、form表单以及打开的Dialog对话框未区分开

解决方案：

问题一

<el-select>中v-model 绑定的数据要和上面的<el-form-item>中prop的名称一致。

<el-form-item label="XXX" prop="eqId" v-if="queryParams.testStatus === '0'"><el-selectv-model="form.eqId"placeholder="请选择XXXX"clearablestyle="width: 240px">

问题二

但是我的v-model和prop名称是一致的，我又搜了好半天，发现官网上说Form表单校验内置 async-validator，默认是的字段类型是string类型（字符串型）。

如果他的选择类别是id的话，需要成number才可以，于是我又试了试。

eqId: [{ required: true, message: "XXX不能为空",trigger: "change",type:'number'},
],

但是给我提示，他不是number类型，含泪继续研究

问题三

我看了半天也没研究出来，最后还是一位大佬提醒我，我的页面有两个表单，验证需要区分开，我才突然想起来，赶紧在resetFrom中做了区分。

if (this.item.Number === '1' || this.item.Number=== '2'){this.resetForm("form");
}else if(this.item.Number=== '3'){this.resetForm("irform");
}

然后发现他们两个form不会互相影响了，但是测试的时候发现页面关闭后再打开，同一个表单下的页面标红项依旧回显。含泪继续看，最后发现因为几个页面用的同一个dialog对话框，我只进行了字段判断打开不同页面的判断，但是未进行dialog中:visible.sync属性进行判断。

<el-dialog :title="title" :visible.sync="open"  append-to-body :close-on-click-modal="false"
><el-form ref="form"  :model="form" :rules="rules" label-width="110px" v-if="(item.Number === '1' || item.Number === '2') && open">...不重要的一些代码...</el-form><el-form ref="irform"  :model="irform" :rules="rules" label-width="115px" v-if="item.Number === '3' && open "></el-form>
</el-dialog>

我设置的:visible.sync=open，所以&&open

终于纠结一天的问题终于解决了，所以做项目一定要细心

vue+element-ui select必填项验证回显问题+实现重置表单内容相关推荐

解决element ui select下拉框不回显数据问题
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://githu ...
ajax必填项验证,jQuery验证 - 通过MVC2中的ajax动态添加必填字段
我正在尝试在MVC2中的表单上使用jQuery验证.我正在使用期货项目中的MicrosoftMvcJQueryValidation.js. 首次加载表单时,它是代表ViewViewModel,并且有三 ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）
layui自带验证体系:手机号验证.邮箱验证.必填项非空验证.数字验证(含代码.案例) 案例 · 截图: 实例代码: <!DOCTYPE html> <html> <he ...
VUE ELEMENT UI 清空select 下拉选项
VUE ELEMENT UI 清空select 下拉选项 1.select代码 <el-form ref="searchForm" :inline="true&qu ...
vue 上传附件设置必填项
在提交表单的时候动态移除, this.$refs.image.clearValidate(); this.rules.imageUrl = [] 如果上传成功就把必填项动态移除,
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
div.php织梦自定义表判断不能为空,织梦自定义表单字段为必填项的教程
织梦自定义表单用的最多的就是制作留言板,报名等功能,但是添加的字段不填写就能提交,容易被恶意提交,为了防止这些,我们可以把这些字段选项设定为必填项. 方法如下: 1. 用php验证在plus/diy ...

vue+element-ui select必填项验证回显问题+实现重置表单内容

项目场景：

问题描述

原因分析：

解决方案：

问题一

问题二

问题三

vue+element-ui select必填项验证回显问题+实现重置表单内容相关推荐

最新文章

热门文章