帶allow-create的el-select限制長度

落葉雪無言發表於2021-11-22
需求：給el-select新增新增欄位長度限制且新增內容不能為空
1、首先給el-select繫結一個id（例如：selectSku），這個id會傳到元件裡面，繫結在那個input上面，
<el-select
    style="width: 100%"
    v-model="ruleForm.skuName"
    filterable
    allow-create
    id="selectSku"
    @change="selectChange"
    default-first-option>
  <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.skuName"
      :value="item.skuName">
  </el-option>
</el-select>

2、然後通過document.querySelector('#selectSku')獲取到那個input節點，給這個input新增原生屬性‘maxlength’，後面跟限制的長度就可以了
open(){
......

this.$nextTick(() => {
  let select = document.querySelector('#selectSku')
  select.setAttribute('maxlength',35);
  select.addEventListener('input',() => {
  select.value = select.value.replace(/\s+/g,'');
  })
})
}
3、我又給這個input新增了一個響應事件，在輸入的時候用正則過濾一下空格，雖然在輸入框裡輸不了空格了，但是你輸入空格，下面還是會出一個空白彈窗，你選擇後發現，是個空格，然後我在
selectChange裡面又處理了一下
selectChange（）{
if( this.ruleForm.skuName == ' ' ) {
  this.ruleForm.skuName = '';
  return ;
}
}
 






相關文章