el-select加上搜索查询时限制开头空格输入的解决方案
更新时间:2024年02月22日 09:42:39 作者:PXY_J
这篇文章主要介绍了el-select加上搜索查询时,限制开头空格输入的解决方案,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
el-select加上搜索查询时,限制开头空格输入的解决方案
**1、注释:**结构中的ref和@input.native很重要
<el-form-item label="商品类型:" prop="productType"> <el-select ref="eleSelect" //这里很重要1 v-model.trim="formData.productType" placeholder="请选择" filterable clearable @input.native="trimSelect" //这里很重要2 > <el-option v-for="item in dictList.SPLX" :key="item.dictId" :label="item.dictLabel" :value="item.dictValue" ></el-option> </el-select> </el-form-item>
2、js中限制开头为空格时重新赋值为空
// 开头为空格时重新赋值为空 const eleSelect = ref() const trimSelect = ()=>{ let regex = /^\s*$/; if(regex.test(eleSelect.value.selectedLabel)){ eleSelect.value.selectedLabel = '' } }
补充:
el-select输入框禁止用户输入空格
使用自定义指令,监听事件,当鼠标按下时阻止默认行为。
<el-select v-model.trim="noUpdatedForm.terminalCode" v-my-directive placeholder="请选择" filterable clearable > <el-option v-for="item in noUpdatedTerminalCode" :key="item.terminalCode" :value="item.terminalCode" :label="item.terminalCode" ></el-option> </el-select> directives: { 'my-directive': { bind(el, binding) { el.addEventListener('keydown', function(e) { if (e.key === ' ') { e.preventDefault() } }) } } },
到此这篇关于el-select加上搜索查询时,限制开头空格输入的文章就介绍到这了,更多相关el-select限制开头空格输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
这篇文章主要介绍了JavaScript重复元素处理方法,结合实例形式分析了javascript针对字符串、数组中重复元素的个数统计,计算及去重复等相关操作技巧,需要的朋友可以参考下2017-12-12JavaScript字符串String和Array操作的有趣方法
字符串和数组在程序编写过程中是十分常用的类型,因此程序语言都会将String和Array作为基本类型,并提供许多字符串和数组的方法来简化对字符串的操作2012-12-12JavaScript实现下拉列表框数据增加、删除、上下排序的方法
这篇文章主要介绍了JavaScript实现下拉列表框数据增加、删除、上下排序的方法,涉及javascript针对页面下拉列表框元素的添加、删除及移动的相关技巧,具有一定参考借鉴,需要的朋友可以参考下2015-08-08
最新评论