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

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

 <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 是没有的,需要自己手动输入的

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

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐