在el-select多选框里面设置input搜索框并能实现搜索功能

13 篇文章 0 订阅

效果:

1、当在输入框里面输入内容时就开始进行筛选,下拉框显示筛选之后的数据

2、当没有符合条件时,显示无数据

3、清空输入框里面的内容后,下拉框显示全部的数据

思路:

1、通过给搜索框设置oninput事件。 oninput :当input的value值发生变化时就会触发,(与onchange的区别是不用等到失去焦点就可以触发了)

2、将输入框内容以及下拉框的数据传递给事件函数

3、根据判断条件,通过filter过滤器筛选符合条件的数据,赋值给新数组,然后将新数组重新赋值给option的遍历数组。

代码实现:

template模板代码里面:

<el-select multiple v-model='selectedArray' value-key="LocationCode" @change='changeSelect' placeholder='请选择' data-live-search="true">

   <!-- 因为选定的value值是对象 为了保证唯一 el-select需添加value-key属性且值和option里面的key值一样-->
   <el-input class="search_input" type="text" v-model="searchText" @input="focusCustomer()" clearable placeholder="搜索" ></el-input>

   <el-option v-for='item in listt' :key='item.LocationCode' :label='item.LocationName' :value='item'></el-option>

</el-select>

method方法:

focusCustomer(){
          //     options是后端请求到的数据
	   //         reg :trim是去除input两边的空格
      var reg = this.searchText.trim()
        //    如果输入框里有value值
      if (reg.length > 0) {

         //newArr 是 data中声明的空数组
        this.newArr = this.options.filter(item => {

           //    判断输入框的内容在下拉框是否存在
          var numberfliter = (item.LocationName.toUpperCase()).indexOf(reg.toUpperCase())
           //    为0的时候,代表存在,-1为不存在
          if (numberfliter == 0) {
            //    直接返回有相同的给newArr数组
            return item
          }
        })
        //    listt是选项变量的数组
        this.listt= this.newArr
      }else {
        //    如果没有搜索词,就显示所有的数据
        this.listt= this.options
      }
},

 

  • 0
    点赞
  • 4
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

小张想摸鱼

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值