带allow-create的el-select限制长度

需求：给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 ;
}

}