el-select加之搜刮查问时,限定末端空格输出的打点圆案

**一、解释:**布局外的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"  //那面很首要两
   >
     <el-option
       v-for="item in dictList.SPLX"
       :key="item.dictId"
       :label="item.dictLabel"
       :value="item.dictValue"
     ></el-option>
 </el-select>
</el-form-item>

二、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限定末端空格输出形式请搜刮剧本之野之前的文章或者持续涉猎上面的相闭文章心愿大师之后多多支撑剧本之野!

点赞(29) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部