我要投稿

el-select加上搜索查询时限制开头空格输入的解决方案

admin JavaScript

2024-03-01 0 622

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()
}
})
}
}
},