element ui 下拉框搜索功能

正常的下拉框就是这样的，但是临时加需求 说需要下拉框里面的信息不存在或者太多的时候，希望自己搜索想要的数据

嗯~听产品的~解决了一下代码如下

 <el-select  :placeholder="appName" @change="appChange" v-model="appName"  filterable :filter-method="dataFilter">
                            <el-option
                                    :value="appName" :key="id">{{appName}}</el-option>
    </el-select>

给下拉框新增加属性  filterable   :filter-method=dataFilter

method 方法里面就是

 // 下拉框开启搜索功能
            dataFilter(val){
                this.value=val
                if(val){
                    this.options=this.optionsCopy.filter((item=>{
                        if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) {
                            return true
                        }
                    }))


                }else{
                    this.options=this.optionsCopy
                }

            },

其中this.options 是循环已经有的数据，this.optionsCopy 是没有的，需要自己手动输入的

这样就解决了啦~感兴趣试一下吧~希望对看到的小伙伴有帮助

标签：val,optionsCopy,toUpperCase,element,item,options,ui,下拉框
来源： https://blog.csdn.net/AnlanJion/article/details/100132911