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限制开头空格输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
来源:https://www.jb51.net/javascript/3160895di.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]