本文详解 Element UI 中实现远程搜索的两种方案：el-autocomplete 与 el-select。el-autocomplete 通过 fetch-suggestions 实现实时输入建议，value 随输入刷新但无选中高亮；el-select 通过 remote-method 实现，仅在选中时更新 value 并显示选中效果。文章提供具体代码示例及核心差异总结，帮助开发者根据需求选择合适组件。
实现效果展示
方法一：使用 el-autocomplete 组件实现远程搜索
el-autocomplete 组件通过 fetch-suggestions 方法实现远程搜索功能。当用户输入内容时，该组件会自动调用开发者提供的方法，并传入当前输入的 value 值以及一个 callback 回调函数。
开发者需要在回调函数中将请求获取到的下拉列表数据通过 callback 返回。返回的列表项中，每一项应以 key 作为 value 的形式传递。此外，也可以通过设置 value-key 属性来指定使用其他字段作为 key。
<el-autocomplete v-model="namenick" :fetch-suggestions="searchNameNick"
placeholder="请输入内容" :trigger-on-focus="false" @select="searchNickhandle">
</el-autocomplete>
// :fetch-suggestions="searchNameNick" ： 返回获取到数据的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据。
// select="handleSelect" ： 当选中建议项时，调用该方法。
async searchNameNick(queryString, callBack){
//整理参数
const params ={
nickname:queryString,
sys_code:4,
page:1,
page_size:100
}
// 定义空数组来接收返回的数据
let nicknameList = []
let res = await this.$proxy({
url: `xxxx`,
method: 'get',
params
})
if(res.code == 0){
//如果搜索结果为空返回“无匹配结果”
if(res.data.items.length == 0){
nicknameList.push({
value :"无匹配结果",
id : -1
})
callBack(nicknameList)
}else{
//对获取的值进行遍历，调整数据结构，value
for (let i = 0; i < res.data.items.length; i++) {
//需要注意的是回显的值必须是一个对象数组，且对象属性名称是 “value”，不然回显失败
nicknameList.push({
value: res.data.items[i].nickname,
id: res.data.items[i].user_id
})
}
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
callBack(nicknameList)
//通过callBack函数将回显数据返回
}, 1000)
}
}else{
this.$message({
type: 'error',
message: '请求失败'
});
}
},
searchNickhandle(item) {
if (item.id !== -1) {
console.log(item.id, '昵称点击回调');
this.user_id = item.id
}
},方法二：使用 el-select 组件实现远程搜索
el-select 组件的远程搜索功能是通过 remote-method 属性来实现的。当用户输入内容时，组件会调用对应的 remote-method 方法，并将当前输入的 value 值作为参数传入。开发者在接收到请求结果后，直接将返回的数据赋值给 el-select 的 options 即可。
<el-select
v-model="value"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="reqLoading"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
export default {
data () {
return {
value: '',
reqLoading: false,
options: []
}
},
methods: {
remoteMethod (query) {
if (query !== '') {
this.reqLoading = true
setTimeout(() => {
this.reqLoading = false
this.options = [{label: '答案cp3',value: '答案cp3'}]
}, 200)
} else {
this.options = []
}
}
}两种方式的对比总结
- el-autocomplete 主要用于输入建议场景。其 value 值会随用户输入实时刷新，但在选中建议项时，不会显示常规的选中效果。
- el-select 的 value 值不会随输入实时刷新，只有在用户明确选中某一项后，value 才会更新。同时，选中项会显示明确的选中效果。
以上就是关于 Element UI 实现远程搜索的两种方式的详细介绍。如需了解更多 Element UI 远程搜索相关内容，建议查阅本站过往文章或继续浏览后续相关文章。感谢大家的支持！