element el-select模糊搜索功能

最新推荐文章于 2025-02-20 20:58:46 发布

原创最新推荐文章于 2025-02-20 20:58:46 发布 · 7.3k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5

这篇博客详细介绍了如何在前端使用Vue.js结合el-select组件实现远程搜索功能，通过axios与后台接口交互，动态加载筛选后的数据。内容包括设置filterable、remote、reserve-keyword等属性，以及处理选中事件和模糊搜索方法，实现输入关键词实时查询并显示匹配项。

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

在这里插入图片描述

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

<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);
                },