el-select加上搜索查询时,限制开头空格输入

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

javascript 复制代码
<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中限制开头为空格时重新赋值为空

javascript 复制代码
  // 开头为空格时重新赋值为空
  const eleSelect = ref()
  const trimSelect = ()=>{
    let regex = /^\s*$/;
    if(regex.test(eleSelect.value.selectedLabel)){
       eleSelect.value.selectedLabel = ''
    }
  }
相关推荐
Mintopia1 分钟前
🌱 AIGC 技术的轻量化趋势:Web 端“小而美”模型的崛起
前端·javascript·aigc
开发者小天9 分钟前
React中的useRef的用法
开发语言·前端·javascript·react.js
im_AMBER13 分钟前
React 11 登录页项目框架搭建
前端·学习·react.js·前端框架
Live&&learn15 分钟前
nvm切换node版本时,npm不跟着切换解决
前端·npm·node.js
xixixin_18 分钟前
【React】检测元素是否出现在用户视窗内
开发语言·前端·javascript·react.js
Sheldon一蓑烟雨任平生40 分钟前
Vue3 任务管理器(Pinia 练习)
vue.js·vue3·pinia·任务管理器·pinia 练习
疏狂难除41 分钟前
spiderdemo第22题与webassembly的跨域
开发语言·javascript·爬虫·rust·wasm·mitmproxy
谢彦超oooo1 小时前
HTML5 与前端开发要点
前端·html·html5
IT_陈寒1 小时前
Vue 3响应式原理深度拆解:5个90%开发者不知道的Ref与Reactive底层实现差异
前端·人工智能·后端
睡前要喝豆奶粉2 小时前
在.NET Core Web Api中使用JWT并配置UserContext获取用户信息
前端·.netcore