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

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

element ui 下拉框搜索功能相关推荐

html 下拉框搜索,下拉框搜索功能的实现
下拉框搜索功能的实现. 首先我们先做一个下拉框会员等级不限会员尊享会员搜索写入按钮触发事件,loadAjax方法事先已经封装好在pagingJs.js里面. pagingJs.js: va ...
vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分新增空 {{ drug.name }} 刪除尚未新增任何資料總金額:{{ totalMoney } ...
使用bootstrap实现下拉框搜索功能
背景公司的小二后台有一个下拉框选择经销商的功能,由于选择的经销商过多,因此添加搜索功能. 前提配置好Bootstrap相关的开发环境主要内容 <div class="form-g ...
element ui下拉框实现
<template><el-select v-model="value4" clearable placeholder="请选择">&l ...
element ui 下拉框选择年份
<template><div class="wrap"><el-select v-model="form.recentYear" ...
Element Select下拉框选中后视图没有渲染等问题
Element Select下拉框选中后视图没有渲染等问题解决办法: 实质就是数据层级太深,当数据改变后,视图没有重新渲染,所以通过$forceUpdate() ,来强制刷新视图,重新渲染,这个比较 ...
删除下拉框只找23火星软件_下拉框搜索就找23火星软件/下拉框软件速来火星下拉...
现在不管做什么,都是需要流量,有了流量才能把自己手上的生意做好.不管是实体店微商,电商,还是互联网创业者,如果你拥有了流量,那么不管你选择去做什么产品,你都会一步到位,一飞冲天,实现自己的梦想.但是现 ...
搜索引擎下拉食云速捷详细_下拉框搜索定胜云速捷宝典,搜索下拉框再生云速捷专业...
现在是十人九商的时代,产品种类和数量日益增多,竞争也在不断加大,微商切忌过长时间消耗在熟人市场,因为你的朋友圈熟人购买是有限的,等她们用完再回购需要时间,做久了你会发现,当你把原有的朋友圈子都卖完了, ...
vue+iview4.0 , vue+element实现下拉框可以自定义输入内容
前言: 最近10月的时候 iview4.0 更新了,但是一直在忙也没用到,正好因为要实现一个下拉框里面我要自定义输入内容的效果,element里面是有这个效果,antd里面没有,因为本项目用的ivie ...

element ui 下拉框搜索功能

element ui 下拉框搜索功能相关推荐

最新文章

热门文章