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

在这里插入图片描述

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

<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);
                },
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45 9 个月前
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 9 个月前
Logo

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

更多推荐