自己实现的远程搜索但是用户输入并且不选择没有实现,在网上查了好久终于实现,特此记录一下
<template>
<a-select
show-search
:value="value"
placeholder="输入组织机构名称搜索"
style="width: 100%"
mode="SECRET_COMBOBOX_MODE_DO_NOT_USE"
:default-active-first-option="false"
:show-arrow="false"
:filter-option="filterOption"
:not-found-content="fetching ? undefined : null"
@search="fetchUser"
@blur="handleBlur"
@change="handleChange">
<a-spin v-if="fetching" slot="notFoundContent" size="small" />
<a-select-option v-for="d in data" :key="d.oid">
{{ d.name + ` ${d.oid != undefined ? `(${d.oid})` : ''}` }}
</a-select-option>
</a-select>
</template>
仅供参考
先说一下远程搜索,这个在官网上也是可以看的多,这里就不过多解释了大概说一下
加上show-search即可剩下的属性在官网都可以查到的
重点说一下用户输入但是不选择选项,失焦之后输入框还是需要有用户输入的内容
1. :filter-option="filterOption"这个是最重要的
2.mode="SECRET_COMBOBOX_MODE_DO_NOT_USE"这个是用来实现当用户再次点击输入框输入空的时候导致输入框还是上一次的内容
3.这里就是那个filterOption的函数的实现
filterOption(input, option) {
// 重要的一步,可以console.log(input)看下输入的是啥
this.value = input; // 在此前是可以手动输入,但鼠标离开后,输入的内容不能在输入框内保存,将input的值给到a-select标签的v-model绑定的newSoftName即可实现将手动输入的值赋值给input
//this.name = input;根据你项目的需求来写
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
},
最后就是
@search="fetchUser"
@blur="handleBlur"
@change="handleChange"
这三个函数的里面的方法就根据你自己的项目需求来写即可!!!这样就完事了。。