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实现QQ邮箱邮件拖拽删除功能

    js实现QQ邮箱邮件拖拽删除功能

    这篇文章主要为大家详细介绍了js实现QQ邮箱邮件拖拽删除功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JS对象和字符串之间互换操作实例分析

    JS对象和字符串之间互换操作实例分析

    这篇文章主要介绍了JS对象和字符串之间互换操作,结合实例形式分析了javascript对象与字符串相互转换的原理与相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 微信小程序服务器日期格式化问题

    微信小程序服务器日期格式化问题

    一般服务器获取到日期都是中国标准时间,需要对其进行格式化,这篇文章主要介绍了微信小程序服务器日期格式化问题,需要的朋友可以参考下
    2020-01-01
  • 微信小程序实现轨迹回放的示例代码

    微信小程序实现轨迹回放的示例代码

    这篇文章主要介绍了微信小程序实现轨迹回放的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 常用的Javascript设计模式小结

    常用的Javascript设计模式小结

    javascript设计模式有很多种,本文给大家介绍常用的javascript设计模式,对javascript设计模式相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • js实现幻灯片轮播图

    js实现幻灯片轮播图

    这篇文章主要为大家详细介绍了js实现幻灯片轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • js,jQuery 排序的实现代码,网页标签排序的实现,标签排序

    js,jQuery 排序的实现代码,网页标签排序的实现,标签排序

    js,jQuery 排序的实现,网页标签排序的实现,标签排序,需要的朋友可以参考下。
    2011-04-04
  • JS原型链 详解及示例代码

    JS原型链 详解及示例代码

    本文主要介绍JS原型链的知识,这里整理了相关资料及简单实现示例代码,有兴趣的小伙伴可以参考下
    2016-09-09
  • HTML使用js给input标签增加disabled属性的方法

    HTML使用js给input标签增加disabled属性的方法

    最近项目上提出一个经常遇到的需求,点击新增时input可输入,点击编辑时input置灰,下面这篇文章主要给大家介绍了关于HTML使用js给input标签增加disabled属性的相关资料,需要的朋友可以参考下
    2024-06-06
  • 微信小程序实现接收验证码

    微信小程序实现接收验证码

    这篇文章主要为大家详细介绍了微信小程序实现接收验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论