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輸入框禁止用戶輸入空格

使用自定義指令，監(jiān)聽事件，當鼠標按下時阻止默認行為。

<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限制開頭空格輸入內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: