element ui 下拉框搜索功能
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
正常的下拉框就是这样的,但是临时加需求 说需要下拉框里面的信息不存在或者太多的时候,希望自己搜索想要的数据
嗯~听产品的~解决了一下代码如下
<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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)