element ui 下拉框搜索功能

element ui 下拉框搜索功能_第1张图片

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

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

 
                            {{appName}}
    

给下拉框新增加属性  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 是没有的,需要自己手动输入的

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

你可能感兴趣的:(前端)