<AutoComplete v-model="keyword" placeholder="用户账号/使用方/服务编号/服务名称/服务KEY值" clearable @on-search="remoteMethod" @on-clear="clearSearch" @on-blur="blurSearch">
<Option v-for="(option, index) in searchResult" :value="retunTitle(option)" :key="index"
@click.native="optionClick(option)">
<div v-if="option.resultType==1">
<span style="padding:2px 10px;border:1px solid #666666;border-radius: 5px;">用户</span>
<span style="margin-left: 10px;margin-right: 5px;">[{{option.accountUse}}]</span>
<span>{{option.serviceConsumer}}</span>
</div>
<div v-if="option.resultType==2">
<span style="padding:2px 10px;border:1px solid #666666;border-radius: 5px;">服务</span>
<span style="margin-left: 10px;margin-right: 5px;">[{{option.serviceNo}}]</span>
<span>{{option.serviceName}}</span>
</div>
</Option>
</AutoComplete>
// 返回title
retunTitle(option) {
if (option.resultType == 1) {
return "用户" + " [" + option.accountUse + "] " + option.serviceConsumer
} else {
return "服务" + " [" + option.serviceNo + "] " + option.serviceName
}
},
//一开始进入触发一次
focusSearch() {
// 调用模糊查询的接口
let data = {
keyword: this.keyword, //关键字
devTerm: this.dsspAppCode == "全部服务" ? "" : this.dsspAppCode,//开发团队
serviceOwner: sessionStorage.getItem("serviceOwner")
}
serverStaticSearch(data).then((res) => {
if (res.data.code == "200") {
this.searchResult = res.data.data
}
});
},
// 点击清空时候触发
clearSearch() {
this.keyword = ""
this.searchInfo = {}
},
// 失去焦点时候触发
blurSearch(val) {
if (val && this.searchResult.length == 0) {
this.keyword = ""
this.searchInfo = {}
this.focusSearch()
}
},
// 输入框的模糊查询
remoteMethod(query) {
console.log(query)
// 调用模糊查询的接口
let data = {
keyword: query, //关键字
devTerm: this.dsspAppCode == "全部服务" ? "" : this.dsspAppCode,//开发团队
serviceOwner: sessionStorage.getItem("serviceOwner")
}
serverStaticSearch(data).then((res) => {
if (res.data.code == "200") {
this.searchResult = res.data.data
}
});
},
注意： AutoComplete组件提供了@on-select="checkedClick" 方法来调用被选中的当前项，但是这个例子中并没有使用这个，而是在option上使用@click.native="optionClick(option)"来触发当前项！！！
因为后端要求把下拉框中每行对应的对象传递过去，@on-select 就不满足需求
