element select必填项验证回显问题的解决

更新时间：2023年04月07日 09:12:47 作者：爱吃糖的GrumpyRabbit

本文主要介绍了element select必填项验证回显问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

项目场景：

今天在做页面的时候，需要含有两个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-select
     v-model="form.eqId"
     placeholder="请选择XXXX"
     clearable
     style="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

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

到此这篇关于element select必填项验证回显问题的解决的文章就介绍到这了,更多相关element select验证回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3中ref和reactive的用法和解析(推荐)
这篇文章主要介绍了vue3的ref和reactive的用法和解析,开始部分讲解了ref，reactive的使用实例，如何进行类型的标注，配合ts这么使用，接着讲解了两者的区别，分别需要注意的点，还有ref的顶层自动解包，需要的朋友可以参考下
2023-03-03
vue如何统一样式(reset.css与border.css)
这篇文章主要介绍了vue如何统一样式(reset.css与border.css)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue2为何能通过this访问到data与methods的属性
这篇文章主要介绍了Vue2为何能通过this访问到data与methods的属性，文章围绕主题展开详细的内容戒杀，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
详解vue3中如何使用shaka-player
这篇文章主要为大家介绍了vue3中如何使用shaka-player示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue.js实现表格合并示例代码
最近工作中遇到一个需求，是要做一个页面放张大表格用来显示数据项，纯粹为了view层操作方便，就用了vue做渲染。然而又被提出了一个需求，需要相邻的相同值的行数据项进行单元格合并，这就醉了。没办法，只能想办法解决，下面通过这篇文章来一起看看吧。
2016-11-11
Vue之使用mockjs生成模拟数据案例详解
这篇文章主要介绍了Vue之使用mockjs生成模拟数据案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
使用vue制作探探滑动堆叠组件的实例代码
探探的堆叠滑动组件起到了关键的作用，下面就来看看如何用vue写一个探探的堆叠组件，感兴趣的朋友一起看看吧
2018-03-03
vue.js利用defineProperty实现数据的双向绑定
本篇文章主要介绍了用Node.js当作后台、jQuery写前台AJAX代码实现用户登录和注册的功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
vue中多个倒计时实现代码实例
这篇文章主要介绍了vue中多个倒计时实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Vuex处理用户Token过期及优化设置封装本地存储操作模块
这篇文章主要为大家介绍了Vuex处理用户Token优化设置封装本地存储操作模块及Token 过期问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09