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 = ''
    }
  }
相关推荐
ZXT8 分钟前
项目精讲 - keepAlive
vue.js
堕落年代8 分钟前
Vue主流的状态保存框架对比
前端·javascript·vue.js
没资格抱怨9 分钟前
el-pagination的使用说明
javascript·vue.js·elementui
沐千熏14 分钟前
Liunx(CentOS-6-x86_64)使用Nginx部署Vue项目
vue.js·nginx·centos
OpenTiny社区18 分钟前
TinyVue的DatePicker 组件支持日期面板单独使用啦!
前端·vue.js
冴羽19 分钟前
Svelte 最新中文文档教程(22)—— Svelte 5 迁移指南
前端·javascript·svelte
树上有只程序猿23 分钟前
Vue3组件通信:多个实战场景,轻松玩转复杂数据流!
前端·vue.js
青红光硫化黑28 分钟前
React基础之useEffect
javascript·react.js·ecmascript
剪刀石头布啊31 分钟前
css属性值计算过程
前端·css
bin915335 分钟前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14基础固定表头示例
前端·javascript·vue.js·ecmascript·deepseek