这是能查到有数据的
根据输入框的字调取接口查出数据
<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);
},