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

夜上海

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

**1、注释：**结构中的ref和@input.native很重要

1. <el-form-item label="商品类型：" prop="productType">
   
2.    <el-select
   
3.      ref="eleSelect" //这里很重要1
   
4.      v-model.trim="formData.productType"
   
5.      placeholder="请选择"
   
6.      filterable
   
7.      clearable
   
8.      @input.native="trimSelect"  //这里很重要2
   
9.    >
   
10.      <el-option
    
11.        v-for="item in dictList.SPLX"
    
12.        :key="item.dictId"
    
13.        :label="item.dictLabel"
    
14.        :value="item.dictValue"
    
15.      ></el-option>
    
16. </el-select>
    
17. </el-form-item>

复制代码

2、js中限制开头为空格时重新赋值为空

1.   // 开头为空格时重新赋值为空
   
2.   const eleSelect = ref()
   
3.   const trimSelect = ()=>{
   
4.     let regex = /^\s*$/;
   
5.     if(regex.test(eleSelect.value.selectedLabel)){
   
6.        eleSelect.value.selectedLabel = ''
   
7.     }
   
8.   }

复制代码

补充：

el-select输入框禁止用户输入空格

使用自定义指令，监听事件，当鼠标按下时阻止默认行为。

1. <el-select
   
2.   v-model.trim="noUpdatedForm.terminalCode"
   
3.   v-my-directive
   
4.   placeholder="请选择"
   
5.   filterable
   
6.   clearable
   
7. >
   
8.   <el-option
   
9.     v-for="item in noUpdatedTerminalCode"
   
10.     :key="item.terminalCode"
    
11.     :value="item.terminalCode"
    
12.     :label="item.terminalCode"
    
13.   ></el-option>
    
14. </el-select>
    
15. directives: {
    
16.   'my-directive': {
    
17.     bind(el, binding) {
    
18.       el.addEventListener('keydown', function(e) {
    
19.         if (e.key === ' ') {
    
20.           e.preventDefault()
    
21.         }
    
22.       })
    
23.     }
    
24.   }
    
25. },

复制代码

到此这篇关于el-select加上搜索查询时，限制开头空格输入的文章就介绍到这了,更多相关el-select限制开头空格输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3160895di.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！