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限制开头空格输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
js,jQuery 排序的实现,网页标签排序的实现,标签排序,需要的朋友可以参考下。2011-04-04
HTML使用js给input标签增加disabled属性的方法
最近项目上提出一个经常遇到的需求,点击新增时input可输入,点击编辑时input置灰,下面这篇文章主要给大家介绍了关于HTML使用js给input标签增加disabled属性的相关资料,需要的朋友可以参考下2024-06-06


最新评论