element-plus vue 错误汇总

news2024/11/25 20:27:02

input 无法输入0.01

element ui input 无法输入0.01

一输出0.0就报错,是因为写成了v-model.number,改成v-model即可。

<el-input v-model.number="formData.reduceMoney"
                      class="input200"
                      type="number"
                      @focus="discountMethodFocus(1)"
                      :disabled="disabledOptions.includes('reduceMoney')">
</el-input>

<el-input v-model="formData.reduceMoney"
                      class="input200"
                      type="number"
                      @focus="discountMethodFocus(1)"
                      :disabled="disabledOptions.includes('reduceMoney')">
</el-input>

input输入小数的问题

input表单校验时会报错,即使已经填值。
实际是因为input内的数据类型有误,使用toFixed转成了字符串,所以每次打开时校验失败。
使用parseFloat再转回数字类型后即可。
(由vue插件返回可知is not a number报错)
不绑定number,无法作为number校验。绑定number,输入小数点有问题。

Num = 20.01
parseFloat(Num.toFixed(2))

js 如何将字符串数字(包括小数)转换为数值?
js中toFixed方法使用时的坑
解决element的表单校验输入框有值但校验未通过的问题
使用v-model.number遇到的问题(小数点后边无法输入0)

更改input select框长度

加上style,style=“width: 100%” 或填入数值即可(100px)

<el-input v-model="quotaUnit" :disabled="editable==0" style="width: 100%"/>

ElementUI Select、Input。改变长度(宽度)

表单校验

可以多层嵌套校验
form表单绑定model和rules,form-item中的prop需要与form的model数据绑定才可校验,
需要初始化form 的model内容
可以进行深层次校验,比如:prop='phone.data’
深层次校验时,写在data中的rules中的形式为:
写type会对类型也进行校验

<el-form-item‘> 中prop=“paymentProductName”的值一定要跟对应的v-model=“ruleForm.paymentProductName”一致,即两个“paymentProductName”得一样,否则会导致rules失效

'phone.data':[
 {
   type: 'number',
   required: true,
   message: ‘必填项’,
   trigger: "blur",
 }
]

vue elementUI 表单校验(多层嵌套)
关于el-form中的rules未生效问题的解决方法
element Vue中表单深层校验和单独校验案例
element-plus表单验证使用 个人总结,这个写的很详细,但是深层嵌套的rules的fields校验失败了,使用的上面的方法校验成功。
validate form asynchronous

按钮居中

在按钮中加style=“display:block;margin:0 auto”

<el-button
    style="display:block;margin:0 auto"
    type="primary" />

如何实现按钮水平居中

自定义表单验证

//data中
rules:{
name:[{validator: this.numRule, trigger: 'blur'}]
}
// method中
 numRule(rule, value, callback) {
     if (Number(value) > 0 &&  Number(value)< 100) {
       callback()
     } else {
       callback(new Error('范围应在0-100间'))
     }
 },

element-ui form表单rules验证 同一个表单不同的两个字段之间的相互验证
ElementUI 的校验函数 validator 的传参与复用
Vue2.x ElementUI form表单中validate传参问题

输入框不允许输入中文

if (!/^[^\u4e00-\u9fa5]{1,10}$/g.test(this.form.name))

正则表达式不允许输入汉字

以‘;’分割的字符串与数组的转换

  • list->str天然函数:list.join(‘;’)
  • str->list天然函数:str.split(‘;’)
  • 但由于输入时,可能混有空格,及’;‘,’;‘大小写问题,对str->list进行了以下修改:.replace(/[\s;;]+/g, ‘;’).split(’;').map(item => item.trim()).filter(item => item !== ‘’)
  • 注:正则表达式/[\s;;]+/g匹配字符串中的空格和分号。replace()方法将其替换为;,然后再使用;进行拆分。拆分后再用trim()方法去除每个元素前后的空格,最终使用filter()过滤掉空元素。

input 框自动跳转页面

背景
使用该框作为密码,想按回车后,先判断是否为空等条件后再调接口,如果正确进入页面。
现象
设置了校验及@keyup.enter后,仍无法正常使用。 表现为:无论输入框是否有内容,回车后又会刷新页面,变成login页。
个人根据现象分析
觉得应该是回车后会直接跳转页面,但由于token还是密码没正常回传,校验失败又跳回了login页面。
chat分析
在el-form-item中只有一个input框并没有设置回车回调函数时,按下回车键会触发表单的默认提交行为。表单的默认提交行为是指将所有表单元素的值以键值对的形式提交到后端服务器进行处理。如果在表单中只有一个输入框并且没有设置回车回调函数,那么按下回车键就会触发这个默认提交行为,导致页面跳转。
解决方法:
在form加入@submit.prevent,代码如下:
在这个例子中,给el-form绑定了一个@submit.prevent事件阻止表单的默认提交行为。这样当用户按下回车键时就不会触发页面跳转了。

<el-form @submit.prevent>
  <el-form-item>
    <el-input v-model="inputValue"/>
  </el-form-item>
</el-form>

修改elment的popper框时出现的问题

背景:时间框显示时无法将全部显示出来,剩余内容只能通过移动游标显示,希望改成完整显示的状态。不完全显示的效果如下图。
在这里插入图片描述
本意只想改当前页面的框,查阅资料发现:popper弹窗样式是和vue.app在同一层的,所以不能使用scoped。由于别的框实际也需要修改,就直接改全局的了,没有用他的修改popper-class的方法。
修改如下:
此处连接三类,优先级更高。(比原来二类连接的高)

<style>
 .el-picker__popper.el-popper.is-pure {
    overflow-y: unset;
}
</style>
<style>
 .el-popper.is-pure {
    overflow-y: unset !important;
}
</style>

将overflow-y删除后即可正常显示了。
使用unset清除样式。
在自己修改时,搞不清楚 ‘.’前面有没有空格,本来写的是:.el-date-picker .el-popper .is-pure,问题是 .el-popper .is-pure实际是一类,中间不需要加空格,而且.el-date-picker 修改的是后续的样式了。
还可以直接使用: '!important’进行强制样式修改。

引用

elementui popper 当前页样式修改 更改出现位置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/638829.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C#开发的OpenRA游戏之建造物品的窗口1

C#开发的OpenRA游戏之建造物品的窗口1 前面已经分析了基地工程车的创建和移动,当玩家把基地工程车移动到合适的位置,就会进行部署基地,也即是选择一个离矿场比较近的位置,因为这样做可以提高采矿的速度,减少采矿车的运输时间。 接着下来,虽然基地是建立了,但是还需要创…

HybridCLR 最佳实践,老项目集成热更(战棋项目)

文本介绍了老项目使用HybridCLR 集成热更的过程 从项目结构调整&#xff0c;代码调整&#xff0c;打包&#xff0c;热更测试&#xff0c;跑完HybridCLR所有流程 先看效果&#xff08;安卓&#xff09; 源码及资料领取方式私信&#xff1a;领取资料&#xff1a;HybridCLR战棋热更…

2023亚马逊云科技中国峰会引领无服务器架构新潮流:Serverlesspresso Workshop

序言 在今年3月&#xff0c;我有幸接触了一个项目&#xff0c;也因此结识了 亚马逊云科技无服务器架构 Serverless。在陆续了解 Amazon 产品的过程中&#xff0c;我逐渐发现它所带给我的惊喜远远超出了最初的预期。 今天&#xff0c;想向大家介绍一个名为 Serverlesspresso Wor…

京东数据分析:2023年Q1京东奶粉品牌销量排行榜

近几年我国新生人口数量不断下降。尽管国家大力推进多胎政策&#xff0c;但奶粉的市场需求量依然有明显下滑&#xff0c;导致国内奶粉行业的发展低迷&#xff0c;今年Q1依然没有回弹的迹象。 根据鲸参谋数据显示&#xff0c;今年Q1奶粉在京东平台销量2000万件&#xff0c;同比下…

自学网络安全(白帽黑客)必看!OWASP十大漏洞解析!

在学习网络安全之前&#xff0c;需要总体了解安全趋势和常见的Web漏洞&#xff0c;在这里我首推了解OWASP&#xff0c;因为它代表着业内Web安全漏洞的趋势&#xff1b; 目录 一、OWASP简介 OWASP Top 10: 2013版至2017版改变了哪些内容 二、OWASP Top 10 A1:注入漏洞 A2:…

【C语言】整,浮点型数据存储,大小端。细节拉满!!

目录 一. 整型 1. C语言内置整型家族 类型的意义&#xff1a; 2.整型在内存如何存储的呢&#xff1f; 3. 原码&#xff0c;反码&#xff0c; 补码 原码 反码 补码 4. 当 整型遇上unsigned 会发生什么呢&#xff1f; 1. unsigned 与 signed 解析 2. printf 输出 有无…

Kafka学习---1、Kafka 概述、Kafka快速入门

1、Kafka概述 1.1 定义 1、Kafka传统定义&#xff1a;Kafka是一个分布式的基于发布/订阅模式的消息队列(Message Queue)&#xff0c;主要是应用于大数据实时处理领域。 2、发布/订阅&#xff1a;消息的发布者不会将信息直接发送给特定的订阅者&#xff0c;而是将发布的信息分…

【Linux 学习 ①】- Linux 环境搭建

目录 一、GouMai 云服务器 二、使用 Xshell 远程登录服务器 三、编写一个 C 程序 四、多用户共享同一个服务器 一、GouMai 云服务器 我们以腾讯云为例&#xff08;购买其他厂商的云服务器&#xff0c;例如&#xff1a;华为云、阿里云&#xff0c;其操作也是类似的&#…

Java集成开发环选择与Eclipse初始常用配置

开发工具的选择 Eclipse 、Idea是最常用的两个Java开发工具&#xff0c;虽然Idea相比前者更易用&#xff0c;但由于其价格昂贵&#xff0c;且由于整体市场经济环境的猥琐&#xff0c;导致各公司开始打击盗版软件&#xff0c;以此来增加收入。 基于以上背景&#xff0c;还是建议…

Kamrada operator:新一代的 Karmada 管理方式

Karmada operator 是 Karmada 社区推出的新组件&#xff0c;它为用户提供了全新的 Karmada 生命周期管理的方式。用户可以在全局集群之上集中式来管理多个 Karmada&#xff0c;通过 CR 资源来控制 Karmada 的创建、升级和卸载。为用户运维和管理 Karmada 提供了极大的便捷。本文…

12个经典性能测试人员面试题

1、性能测试包含了哪些软件测试&#xff08;至少举出3种&#xff09;&#xff1f; 参考答案&#xff1a;负载测试;压力测试;容量测试;负载测试&#xff08;Load Testing&#xff09;&#xff1a;负载测试是一种主要为了测试软件系统是否达到需求文档设计的目标&#xff0c;譬如…

如何在 Jupyter Notebook 用一行代码启动 Milvus?

随着各种大语言模型&#xff08;LLM&#xff09;的涌现和 AI 技术变得越来越普遍&#xff0c;大家对于向量数据库的需求也变得越来越多。作为大模型的记忆体&#xff0c;向量数据库不仅可以帮助解决 LLM 面临的最大问题——缺乏特定领域知识和最新数据&#xff0c;还可以赋能相…

【数据结构】查找(一)

因为时间关系&#xff08;现阶段来不及&#xff09;&#xff0c;先不学红黑树和B树&#xff0c;所以这是查找&#xff08;一&#xff09;。 先写一下二分查找&#xff0c;数据结构数上叫的“折半查找”。 二分查找 左闭右闭区间 左闭右开区间 下面依旧是对王道书上选择题的一…

突破竞争壁垒:独立站如何实现有效的品牌差异化?

在当今竞争激烈的电商市场中&#xff0c;独立站已经成为了越来越多品牌的选择。然而&#xff0c;要想在这个竞争激烈的环境中脱颖而出&#xff0c;建立起独特的品牌差异化是至关重要的。品牌差异化是一种战略方法&#xff0c;旨在突出品牌在市场上的独特性和独有价值&#xff0…

Java阶段四Day02

Java阶段四Day02 文章目录 Java阶段四Day02VueCli嵌套路由总结项目开发开发流程关于项目项目分析数据库的设计规范(基于阿里巴巴Java开发手册)数据库表设计创建项目关于依赖项关于<build>报错 VueCli嵌套路由 由于Vue Cli工程是单页面的&#xff0c;为了保证能显示各式各…

如何实现不同服务器之间 大规模数据同步?

随着企业结构分散化的不断扩大&#xff0c;企业的数据中心、服务器节点、异地分支机构之间&#xff0c;会存在多种文件交换场景。传统的FTP、rsync、网盘等传输方式在数据体量较小、时效性要求不高的情况下&#xff0c;基本也可以满足需求。 但随着数量爆发式增长&#xff0c;需…

大二下学期期末总结

文章目录 针对学习方面大学生就业指导与创业教育数据结构Java企业级开发大数据实时处理大数据可视化服务器技术 针对生活方面针对课外活动方面 针对学习方面 大学生就业指导与创业教育 这门课很好的帮我们分析了目前的就业形势&#xff0c;预测了未来的就业前景&#xff0c;为…

庆祝牛学长4周年!精彩折扣活动等你来享!

值此周年庆之际&#xff0c;我们衷心感谢您对我们的支持与信任。为了回馈广大用户的厚爱&#xff0c;我们特别推出一系列令人振奋的打折活动&#xff0c;让您在软件购买和使用过程中获得更多实惠和便利。 活动时间&#xff1a;从即日起&#xff0c;至2023年6月26日 活动链接&…

接口测试开发之:一篇搞懂 Cache、Cookie及Session。

目录 1、引言 2、Cache 2.1 缓存定义 2.1.1 缓存概念 2.1.2 缓存优点 2.2 浏览器缓存 2.2.1 存储路径 2.2.2 缓存优点 2.2.3 缓存弊端 2.2.4 原理图 2.3 代理缓存 2.3.1 原理 2.3.2 应用场景 2.3.3 原理图 2.4 网关缓存 2.4.1 原理 2.4.2 缓存分类 2.4.3 缓存…

uniapp uview2.0 其中u--textarea组件无法换行,换行无效问题解决方案

最终发现是因为默认值的问题&#xff0c;uniapp和uview的官方文档写的confirmType的默认值都是done&#xff0c;但是uniapp的textarea在没有配置的情况下是没有值的&#xff0c;uview给加了一个默认值done&#xff0c;就出现了无法返回的问题&#xff0c;尝试了将uview的textar…