element el-select模糊搜索功能

在这里插入图片描述
这是能查到有数据的

在这里插入图片描述

根据输入框的字调取接口查出数据

<el-select v-model="valuee"
                           style="height:30px;margin-right:20px;"
                           filterable
                           remote
                           reserve-keyword
                           placeholder="请输入关键词"
                           :remote-method="remoteMethod"
                           :loading="loading"
                           @focus="repeatList"
                           clearable="true"
                           @change="handleSelectBranchCom">
                    <el-option v-for="item in dddd"
                               :key="item.value"
                               :label="item.label"
                               style="height:30px"
                               :value="item.value">
                    </el-option>
                </el-select>


 data: function () {
                return {
                		states :'',
                		list :'',
                		dddd :'',
                		searchid :''
                		
                		}	

//在 methods:{}   写入下面代码
				handleSelectBranchCom(item) {
                    console.log('远程搜索选中后返回的item:::::即value的值')
                    console.log(item)
                    //如果要获取选择的 id或者名字   从item中取值
                    this.searchid = item;
                    console.log(this.searchid)
                },
                // 搜索模糊查询数据下拉框
                remoteMethod(query) {
                    var that = this;
                    axios.get('数据接口', {
                        params: {
                            
                            comName: query  //请求的参数  输入的值

                        }
                    })
                        .then(function (res) {
                        //将取到的值进行遍历
                            that.states = res.data.data;
                            
                            that.list = that.states.map(item => {
                            	// item.uid     item.name根据接口里的关键字
                                return { value: item.uid, label: item.name };
                            });


                        })
                        .catch(function (err) {
                            console.log(err)
                        });
                    setTimeout(() => {
                        if (query !== '') {
                            that.loading = true;
                            setTimeout(() => {
                                that.loading = false;
                                that.dddd = that.list.filter(item => {
									//这里的label值对应着 上面遍历 return  返回的label:item.name
                                    return item.label.toLowerCase()
                                        .indexOf(query.toLowerCase()) > -1;
                                });
                            }, 200);
                        } else {
                            that.dddd = [];
                        }
                    }, 100);
                },
  • 5
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值