带allow-create的el-select限制长度
需求:给el-select添加新增字段长度限制且新增内容不能为空
1、首先给el-select绑定一个id(例如:selectSku),这个id会传到组件里面,绑定在那个input上面,
<el-select
style="width: 100%"
v-model="ruleForm.skuName"
filterable
allow-create
id="selectSku"
@change="selectChange"
default-first-option>
<el-option
v-for="item in options"
:key="item.id"
:label="item.skuName"
:value="item.skuName">
</el-option>
</el-select>
2、然后通过document.querySelector('#selectSku')获取到那个input节点,给这个input添加原生属性‘maxlength’,后面跟限制的长度就可以了
open(){
......
this.$nextTick(() => {
let select = document.querySelector('#selectSku')
select.setAttribute('maxlength',35);
select.addEventListener('input',() => {
select.value = select.value.replace(/\s+/g,'');
})
})
}
3、我又给这个input添加了一个响应事件,在输入的时候用正则过滤一下空格,虽然在输入框里输不了空格了,但是你输入空格,下面还是会出一个空白弹窗,你选择后发现,是个空格,然后我在
selectChange里面又处理了一下
selectChange(){
if( this.ruleForm.skuName == ' ' ) {
this.ruleForm.skuName = '';
return ;
}
}
带allow-create的el-select限制长度的更多相关文章
- select into 、 insert into select 、create table as select复制表
Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) values(value1,value2,...)这种形式的在应用程序开发中必不可少.但 ...
- sqlserver不能直接create table as select
sqlserver不能直接create table as select 在sqlserver 下想复制一张表的,想到oracle下直接create table xxx as select * from ...
- oracle数据库【表复制】insert into select from跟create table as select * from 两种表复制语句区别
create table as select * from和insert into select from两种表复制语句区别 create table targer_table as select ...
- 慎用create table as select,一定要注意默认值的问题
再做一些数据迁移时候,很多人会使用create table as select * from table where id=-1的方式来年建立一摸一样的表,但是这样做有个很大的弊端,不能将原表中的d ...
- 【经验】angularjs 实现带查找筛选功能的select下拉框
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...
- create table 使用select查询语句创建表的方法分享
转自:http://www.maomao365.com/?p=6642 摘要:下文讲述使用select查询语句建立新的数据表的方法分享 ---1 mysql create table `新数据表名` ...
- MySQL中表复制:create table like 与 create table as select
CREATE TABLE A LIKE B 此种方式在将表B复制到A时候会将表B完整的字段结构和索引复制到表A中来. CREATE TABLE A AS SELECT x,x,x,xx FROM B ...
- MySQL中表复制:create table like 与 create table as select
1 CREATE TABLE A LIKE B此种方式在将表B复制到A时候会将表B完整的字段结构和索引复制到表A中来. 2. CREATE TABLE A AS SELECT * FROM ...
- Create table as select
create table xxx as select create table table1 =; 根据table2的表结构,创建tables1 create table table1 as sele ...
- 根据查询结果创建新表create table .. as (select....)
一张表 student 查询数学和英语都是90分以上的同学,并创建一张新表 test1
随机推荐
- 11.4.2 LVS—NAT
Virtual Server via NAT(VS-NAT) 用地址翻译实现虚拟服务器。地址转换器有能被外界访问到的合法IP地址,它修改来自专有网络的流出包的地址。外界看起来包是来自地址转换器本身,, ...
- 感恩笔记之二_SQL语句扩展功能
前言导读: 本章是对SQL语句基础功能中,一些功能用法的扩展使用的总结,都是实际工作中一些经验的积累. 1 select列查询功能组合使用 --1 函数处理+列计算+列改名 select 函数(列) ...
- react之组件生命周期
四个阶段 初始化 运行中 销毁 错误处理(16.3以后) 初始化 constructor static getDerivedStateFromProps() componentWillMount() ...
- 深入理解Java虚拟机之垃圾回收篇
垃圾回收简介 Java 会对内存进行自动分配与回收管理,使上层业务更加安全,方便地使用内存实现程序逻辑.在不同的 JVM 实现及不同的回收机制中,堆内存的划分方式是不一样的. 简要地介绍下垃圾 ...
- WPF实现Win10汉堡菜单
WPF开发者QQ群: 340500857 | 微信群 -> 进入公众号主页 加入组织 前言 有小伙伴提出需要实现Win10汉堡菜单效果. 由于在WPF中没有现成的类似UWP的汉堡菜单,所以我们 ...
- python join的用法
joinn其实就相当于用某个字符串来拼接列表或者元组中的元素 当然也可以将字符串以某一个str拼接起来 得出的结果自然也是字符串 ex1: results: 实例用处: 当我们从某个文件中读出内容时, ...
- 【UE4 C++ 基础知识】<14> 多线程——AsyncTask
概念 AsyncTask AsyncTask 系统是一套基于线程池的异步任务处理系统.每创建一个AsyncTas,都会被加入到线程池中进行执行 AsyncTask 泛指 FAsyncTask 和 FA ...
- 极简实用的Asp.NetCore框架再新增商城模块
概述 关于这个框架的背景,在前面我已经交代过了.不清楚的可以查看这个链接 1.极简实用的Asp.NetCore模块化框架决定免费开源了 2.极简实用的Asp.NetCore模块化框架新增CMS模块 算 ...
- Allegro如何测量距离,测距工具的使用
http://www.allegro-skill.com/thread-2480-1-1.html
- ahb时序解析
ahb 总线架构 AHB(Advanced High Performance Bus)总线规范是AMBA(Advanced Microcontroller Bus Architecture) V2.0 ...