element-ui中select树形控件以及多选标签消除检验提示信息

最新推荐文章于 2023-09-07 17:28:45 发布
最新推荐文章于 2023-09-07 17:28:45 发布
阅读量1.1k 收藏 2
点赞数 3
分类专栏： 前端 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41821445/article/details/121562627
版权

最近在写项目时遇到这样的情况：select框触发校验之后再次选择并且已经选择上内容了 但是校验提示信息就是不消失 查了很久最后找到解决办法 在此记录以防忘记
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

问题就是这样的 已经有内容了 但是校验提示不会消失
最先找到的解决办法是让prop和v-model保持一致 但是并没有起作用

最终的解决办法是这样的，给这个select添加事件在方法中取消掉这个校验提示就可以啦！！！
在这里插入图片描述
在这里插入图片描述

另外还有一个就是只要星号 这样的话就需要自己写校验提示了
只要星号的方法就是将prop去掉 写上required就可以了，如下图 不需要在rules中写
在这里插入图片描述

明天依然是晴天~
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Element-UI 使用手册文档 V2.4.6 （Vue版本）.pdf
11-18
Element-UI 使用手册文档 V2.4.6 （Vue版本） 致谢 ...Tree 树形控件 - 2 - 本文档使用 书栈(BookStack.CN) 构建 Pagination 分页 Badge 标记 Notice 通知组件 Alert 警告 Loading 加载 Me
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的界面元素，使得开发者能够快速构建美观、响应式的Web应用。NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于...
elementUI el-form表单校验不消失 强制去掉校验
m0_64491262的博客
02-10 4123
尝试变更form中字段的默认类型,修改rules的change或者blur,都没用.最后选择给form绑定change事件,有值时取消校验.直接点击提交或保存,弹出校验信息('请输入xxxxxx')在输入框中输入信息后,校验信息无法自动消失。
在vue里面，element ui，el-select表单选中校验失败
qq_40712862的博客
07-28 4838
在vue里面，element ui，el-select表单选中校验失败
关于element ui 中使用表单校验字段，校验一直不消失的问题
weixin_54938190的博客
02-17 2933
关于element ui 中使用表单校验字段，校验一直不消失的问题
使用Element下拉选项组件——清除提示语
qq_61437464的博客
09-07 663
当我们使用规则去判断当前选项是否为空，如果为空会使用“提示语”提醒用户该选项是必填项，当用户填完选项之后发现“提示语”还存在，虽然不影响后面的操作，但是给用户的体验感并不是很好，因此，我们需要做的时，当用户填完信息之后的“提示语”也要随着消失。
el-select点击选择后仍有rules提示问题
Giraffe0615的博客
06-11 1783
el-select点击选择后仍有rules提示问题
基于Element的组件改造的树形选择器(树形下拉框)
10-15
在本文中，我们将深入探讨如何基于Element UI框架进行组件改造，特别是创建一个树形选择器（树形下拉框）。Element UI 是一个流行的 Vue.js UI 框架，提供了许多开箱即用的组件，如 el-select 和 el-tree。然而，在...
Element的el-tree控件后台数据结构的生成以及方法的抽取
10-15
Element的el-tree控件是基于Vue.js的前端组件库Element UI中的一个强大功能，用于展示层次结构的数据，如目录、组织架构等。el-tree控件的后台数据结构生成和方法抽取是实现动态加载、异步数据加载以及树状数据操作...
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
10-17
在Element UI中，Tree组件是一种常用的用来展示层级结构数据的控件。懒加载模式（lazy loading）在这种场景下尤其有用，因为它能显著提高性能，特别是处理大量数据时。懒加载意味着只有在用户展开父节点时才会加载其...
vue element-ui select 多选验证不通过问题处理
u012386455的博客
04-21 5156
vue elemnt ui select 多选验证不通过
element-ui 表单校验，el-select校验失效问题
热门推荐
m0_66899315的博客
04-29 1万+
element-ui 表单校验，el-select遇到了校验失效问题，有值的情况下，校验规则并没有对应消失
ElementUI表单验证 错误提示不消失原因（最全面，一次解决）
weixin_46463341的博客
10-18 9272
ElementUI表单验证 错误提示不消失原因（最全面，一次解决）
为什么elementui表单验证提示不消失？
weixin_39238520的博客
09-18 2136
如下图所示，验证name和v-model的name是一样的 这里的嵌套是单一值的判断。 如果想要判断循环下嵌套的属性或者值的话，需要用到把:rules=‘[]’写到el-form-item里面，下面v-model的值要和el-form-item的prop一致，模式为如下图所示 再者可参考官网的邮箱域名哪里，就可以了 ...
vue element form rules表单规则验证，输入框有值，但验证始终不消失问题的个人解决办法
qq_38876396的博客
06-23 5258
本文章对element的表单规则验证中输入框有值，但验证始终不消失的问题，在个人项目的特殊情况下提出解决办法
vue3 +element-plus中避免一打开表单的下拉选择的change事件自动校验问题
stay hungry, stay foolish
08-31 2144
新增和编辑共用一个弹窗时，每次打开新增弹窗，el-select的表单项会触发change事件的自动校验。我这里的下拉选择是支持多选的，也就是属性上有multiple。
Vue elementUI-select多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应
zhuzicc的博客
08-26 5404
文章目录一、问题描述二、问题分析三、解决方法1.方法一 vm.$set2.方法二 $forceUpdate() 一、问题描述 项目上使用Vue+elementUI-select多选下拉框做数据编辑时，数据回显成功，但是无法对回显成功数据进行操作。 代码片段： <template> <el-form-item label="标签：" prop="values"> <el-select v-model="form.values"
ElementUi中el-cascader表单验证问题
weixin_38897313的博客
09-07 809
【代码】ElementUi中el-cascader表单验证问题。
使用el-select 嵌套 tree 树形控件
最新发布
09-21
要使用el-select嵌套tree树形控件，您可以使用Element UI提供的el-cascader组件来实现。el-cascader是一个级联选择器，可以将树形结构的数据展示为多级选择框。您可以通过配置el-cascader的options属性来设置树形数据源，然后根据需要设置其他属性，例如placeholder、value、clearable等。使用el-cascader的时候，可以通过设置show-all-levels属性为true来显示所有层级的选项。 以下是一个使用el-select嵌套tree树形控件的示例代码： ``` <template> <el-cascader v-model="selectedOptions" :options="treeData" show-all-levels clearable placeholder="请选择" ></el-cascader> </template> <script> export default { data() { return { selectedOptions: [], // 选中的选项 treeData: [ // 树形数据 { value: '1', label: '选项1', children: [ { value: '11', label: '选项1-1', children: [ { value: '111', label: '选项1-1-1', }, { value: '112', label: '选项1-1-2', }, ], }, { value: '12', label: '选项1-2', }, ], }, { value: '2', label: '选项2', }, ], }; }, }; </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值