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

2024-03-01 0 619
目录
  • el-select加上搜索查询时,限制开头空格输入的解决方案
  • 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限制开头空格输入内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • el-select单选时选择后输入框的is-focus状态并没有取消问题解决
  • vue实现el-select触底分页+远程搜索的示例
  • vueel-select与el-tree实现支持可搜索树型
  • element-ui 远程搜索组件el-select在项目中组件化的实现代码

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript el-select加上搜索查询时限制开头空格输入的解决方案 https://www.u-9.cn/biancheng/javascript/182180.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务