vue:遇到的坑之-----form属性(element-ui)_vue infinity-程序员宅基地

技术标签: el-form  element-ui  vue  填坑  

1.解决输入框输入内容后回车就会刷新页面bug

加一个@submit.native.prevent就可以已解决

原理:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 标签上添加 @submit.native.prevent。

 <el-form @submit.native.prevent></el-form>

场景:表单双击编辑时遇到的

 

2.表单动态校验

data(){
    const validAge = (rule,value,callback) =>{
        if (!value) {
            callback(new Error('年龄不能为空'));
        } else if(value < '18' ){
            callback(new Error('年龄不能小于18!'));
        } else {
            callback();
        }
    }
    return {
        formRules:{
            age:[{require:true,trigger:'blur',validator:validAge}]
        }
    }
}

3.表单输入内容限制

只允许输入数字

① 使用正则

<el-form>
    <el-form-item>
        <el-input v-model="data" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
    </el-form-item>
</el-form>

②vue自带的校验 (不过这个类型是为num类型而不是string!!

 所以这里会有两个坑:

第一个:当数据回显时,数据有可能变成string类型,所以回显的时候这个参数值记得转成num类型,不然rule会一直提示请输入正确格式!如果回显数据格式没变化的话就可以不用管了

<el-form :model="form" :rule="rule">
    <el-form-item prop="data">
        <el-input v-model.number="data"></el-input>
    </el-form-item>
</el-form>
data() {
    return {
        rule:{
            data:[{ required: true, message: '请输入内容' }, 
                  { type: 'number', message: '请输入正确格式' }]
        }
    }
},
methods:{
    // 回显
    updateData() {
        this.form.data = Number(this.form.data) ;
    }

}

第二个坑:当数据输入到24位以后 (虽然不可能会有这么多位,但是万一呢0.0),会自动显示成infinity(无穷大)

所以最好做一个长度限制 :maxlength="10"

4.解决el-input和el-select宽度不一致

加了一个透明的图标

<el-form-item>
    <el-input v-model="data" suffix-icon="el-icon-sunny"></el-input>
</el-form-item>

<style>
.el-icon-sunny {
    color: transparent;
}
</style>

5.下拉回显显示id而不是label的原因可能是类型不一样,id为数字,而匹配的是字符串

这个问题也是数据格式的原因 例子我就没附了

6.表单校验的触发类型可以为多个或者不写

有时候用到了el-input 和 el-select中的特殊的模板:

这个时候校验的触发时机就会有问题,有时候输入完值后校验还在 或者 刚打开对话框就触发了校验 (这里用上了:validate-on-rule-change="false" 属性)

解决办法:可以改下trigger的值

rule: {
        data1: [{ required: true, message: '请输入内容', trigger: 'change,blur' }],
        data2: [{ required: true, message: '请输入内容']
      }

 

7.表单的标签插槽,当要对标签做样式修改时,可以利用插槽

<el-form-item prop="name" required>
    <template slot="label">
        <span style="letter-spacing:4px">名称</span>
     </template>
    <el-input v-model="form.name"></el-input>
</el-form-item>

 

遇到新的以后再补充!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43551840/article/details/103564517

智能推荐

DWZ (JUI) 教程 DWZ table 分页排序教程_dwz分页使用-程序员宅基地

文章浏览阅读2.6w次,点赞8次,收藏9次。一直很忙 demo一直没有写,最近忙着换工作空闲之余,写一下分页排序的 Demo 其实 也是比较简单的顺便也录了一个小视频 http://115.com/file/c2ik04qy http://v.youku.com/v_show/id_XNDMxMDMzOTg4.htmlJSP 页_dwz分页使用

你已经落伍了!认知智能已经来了,别成为最后一个知道的人!道翰天琼-1!_认知智能时代-程序员宅基地

文章浏览阅读130次。认知智能是计算机科学的一个分支科学,是智能科学发展的高级阶段,它以人类认知体系为基础,以模仿人类核心能力为目标,以信息的理解、存储、应用为研究方向,以感知信息的深度理解和自然语言信息的深度理解为突破口,以跨学科理论体系为指导,从而形成的新一代理论、技术及应用系统的技术科学。 认知智能的核心原理范畴包括:1.宇宙、信息、大脑三者关系;2.人类大脑结构、功能、机制;3.哲学体系、文科体系、理科体系;4.认知融通、智慧融通、双脑(人脑和电脑)融通等核心理论体系。 认知智能实现落地四步走:1.认知宇宙..._认知智能时代

Idea maven 工具窗口详解-程序员宅基地

文章浏览阅读9k次,点赞4次,收藏11次。如何打开此窗口

树莓派街机乱码--batocera 中文乱码 --RetroArch 中文乱码_retroarch中文乱码-程序员宅基地

文章浏览阅读1.1w次。树莓派街机乱码--batocera 中文乱码 --RetroArch 中文乱码的解决办法。_retroarch中文乱码

使用Ant Design Pro初始化报错记录_arco design pro报错初始化失败-程序员宅基地

文章浏览阅读1.5k次。使用Ant Design Pro初始化报错记录问题说明主要处理问题说明第一次使用 Ant Design Pro ,根据官方文档使用npm create umi创建项目后,使用npm install安装相关依赖时报错了!重试了好几次都不行,刚开始怀疑是中文目录问题导致的换了个目录,重新操作,下载前还使用npm install -g npm命令将npm升级到最新版本,同时使用管理员权限启动的..._arco design pro报错初始化失败

面向搜索引擎编程工具-程序员宅基地

文章浏览阅读7.1k次,点赞8次,收藏6次。面向搜索引擎编程工具介绍面向搜索引擎编程工具项目简介面向搜索引擎编程那是个玩笑话。目的是更方便的搜索学习知识。话不多说看了项目截图你就知道这是个什么工具了。一个搜索页面,可以设置成浏览器默认主页自定义收藏夹多种搜索方式可自定义背景适配多端:如何使用直接使用: 如果你嫌麻烦可以直接访问我的地址 将网页设置为主页我的网址自定义: 或者先给个star,然后clone项目对代码进行修改:修改位置:searchindex.html端口号:666你完_面向搜索引擎

随便推点

知识点总结Day03——方法_过程调用时,有多个参数用什么调开-程序员宅基地

文章浏览阅读98次。目录第一章 前言 IDEA常用快捷键第二章 方法一、方法的定义及调用(回顾—参考Day02方法入门)二、方法的注意事项三、方法的定义格式3.1 方法的定义格式3.2 示例代码四、方法的调用格式4.1 方法的三种调用格式(举例参考3.2)4.2 有参无参调用4.3 有无返回值的方法定义五、方法重载5.1 方法重载的定义5.2 方法重载的使用格式5.3 方法重载的相关因素及无关因素第一章 前言 IDEA常用快捷键快捷键 功能 Alt+_过程调用时,有多个参数用什么调开

如何使用python中的取整floor函数?_floor python-程序员宅基地

文章浏览阅读2.2k次。如果一工程通过公式计算得出需要7.1辆汽车,直接取整成7辆肯定是完不成任务的,所以只有向上舍入成8才可以,即取整成7,再加1。取整加1,就是向上舍入成整数。相反,如果取整减1,那就是向下舍入成整数,即向下取整。今天,我们就来认识一下python中向下取整函数floor函数。1、floor()得到最接近原数但是小于原数的部分2、语法import mathmath.floor(x)注意:floor() 函数需要导入 math 模块才能访问,通过静态对象调用该方法。3、参数x 数值表达式4_floor python

pytorch语法库_torch库的语法-程序员宅基地

文章浏览阅读134次。kaiming初始化modules():children()_torch库的语法

深度测评 | 五大主流多端开发框架全面对比-程序员宅基地

文章浏览阅读1.8w次,点赞2次,收藏23次。2021 跨平台开发框架到底哪家强?目前市场上有多个专业做跨平台开发的框架,那么对开发者来说究竟哪一个框架更符合自己的需求呢?笔者特地总结对比了一下不同框架的特性。国内外笔者选择了一共 5 个主流的测评对象,分别是 RN,Flutter,Ionic,NativeScript,以及用友 APICloud 团队开发的 AVM。目前来看比较火的应该是 Flutter,次之 RN,具体还要看企业的应用场景和领域,AVM,Ionic,NativeScript 在不少企业和个人开发者中也使用率较高。一,安装环境_多端开发框架

Oracle_oracle本年累计求每个月的差额-程序员宅基地

文章浏览阅读185次。查询数据本节将学习如何从Oracle数据库中查询数据。我们将从一个简单的查询开始,从单个表中检索数据。Select语句 - 演示如何查询单个表中的数据。--查询语句: select 数据 from 数据源 查询一张表中的所有数据的指定字段值--条件查询: select 数据字段 from 数据源 where 行过滤条件 --> 满足行过滤条件where的数据被保留在结果集中,只保留指定字段的值select--执行过程: from -->where-->select/..._oracle本年累计求每个月的差额

SQL、LINQ和Lambda表达式_lambdaquery().in-程序员宅基地

文章浏览阅读7.4k次,点赞16次,收藏20次。首先说说这三者完全是三种不同的东西,SQL是结构化查询语言(Structured Query Language)简称,这大家再熟悉不过了,下面主要介绍LINQ和Lambda表达式的基本概念以及同一查询这三者的不同实现。 LINQ(Language Integrate Query)是语言集成查询他在对象和数据之间建立一种对应的关系,可以使用访问内存对象的方式查询数据集合。LINQ查询是C#中的一_lambdaquery().in