想做一个输入选择框,可搜索相关词条,并展示在输入框下方
代码输入,searchword是输入框内容,querylist是自定义的方法,返回搜索结果列表,目前的问题是,如果加上 :remote-method方法,就无法获取到输入框内容,即querylist的入参一直是空的
<el-form-item prop="searchword">
<el-select
v-model.trim="formInfo.searchword"
style="width: 300px"
remote
:remote-method="querylist"
filterable
reserve-keyword
placeholder="请输入标题或分类"
clearable
@blur="onBlur"
@visible-change="visibleChange"
>
<el-option v-for="item in articlelist" :key="item.id" :value="item.type" :label="item.articletitleList" />
</el-select>
问题在于你只给它定义方法名,虽然会触发这个方法,但是你也没有给这个方法加上参数让其携带输入框内容呀,方法里面querylist(b){}这个b就是输入框内容
可以对比一下官网https://element.eleme.cn/#/zh-CN/component/select
<template>
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [],
value: [],
list: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"]
}
},
mounted() {
this.list = this.states.map(item => {
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
}
}
}
}
</script>