el-select element 可自定义输入的可搜索下拉框

本文介绍如何使用Element-UI的el-select组件实现自定义文件格式查询功能,包括搜索、手动输入及创建新条目选项。通过添加filterable属性实现搜索功能,解决手动输入值无法绑定v-model的问题。
部署运行你感兴趣的模型镜像

描述: 用户可自定义输入要查询的文件格式,也可根据下拉列表选择文件格式,并且在用户输入的同时,具有搜索功能。

实现步骤:

1.使用element-ui组件的 el-select标签  并且配置上filterable 可搜索属性

<el-select
     filterable
     clearable 
     placeholder="请选择文件格式"
     v-model="searchForm.fileExt"
     class="search-input"
     size="small"
      @change.native="selectBlur" //添加change事件以防万一
       @blur.native="selectBlur"  //失焦事件(必须)
      >
        <el-option
        :value="item.key"
         :label="item.value"
         v-for="(item, index) in fileFormatArr"
         :key="index"
         ></el-option>
</el-select>

2.给el-select标签手动绑定blur事件,并且手动赋值给el-select标签的v-model

selectBlur(e) {
      this.searchForm.fileExt = e.target.value
    },

3.在此处有个bug,如果浏览器有点小卡的话,会出现手动输入的值绑定不上el-select  v-model的现象,因为没有可配置项,失焦或者重新聚焦(点击)的时候会自动清除v-model绑定的数据。所以需要将绑定事件“@blur”后面加上“.native”;完美解决。

注意:如果以上两种方法都无法解决  或者不能满足项目需求,那么请在el-select 组件中  加入filter-method属性,可以即时获取当前变化的值,效果参考原生change 事件,但是这样会破坏默认的模糊搜索功能,需要手动自己添加搜索规则。

如(未添加规则):

filterData(e) { //值改变判断
      this.searchData = e
      if (e != this.historyVal) {
        this.key = true
      }
    },

 

4.如需要在下拉选项中创建自定义输入值的选项,需要在el-select标签上添加属性allow-create以允许允许用户创建新条目。

效果如图(非创建新条目):

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值