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适配器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04npm安装依赖时出现Peer Dependencies冲突报错解决分析
这篇文章主要为大家介绍了npm安装依赖时出现Peer Dependencies冲突报错解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
最新评论