一个简单的vue下拉模糊查询
前端代码<el-autocompletev-model="accountSearch":fetch-suggestions="accounQuerySearchAsync"@select="accountHandleSelect":debounce=10placeholder="请输入银行名称"></el-autocomplete>data: () => {retur
·
前端代码
<el-autocomplete
v-model="accountSearch"
:fetch-suggestions="accounQuerySearchAsync"
@select="accountHandleSelect"
:debounce=10
placeholder="请输入银行名称"
>
</el-autocomplete>
data: () => {
return {
getBankCodeFun:getBankCode,
accountSearch: '',
}
}
methods: {
accounQuerySearchAsync(queryString, callback) {
var list = [{}];
let bankCode ;
//如果传输入框是空值,给后台传"all",表示查询全部
if (queryString===""){
bankCode = "all"
}else {
bankCode = queryString;
}
//调用后台接口拿数据
this.getBankCodeFun(bankCode,(res,err)=>{
for(let i of res.content){
i.value = i.bankName; //将想要展示的数据作为value
}
list = res.content;
callback(list);
});
},
// 模糊查询下拉框 鼠标键盘选中点击触发
accountHandleSelect(item) {
this.accountSearch = item.value;
this.accountSearchCode = item.bankCode;
}
}
//调用后台
function getBankCode(paramObj,cb) {
const apiUrl =`${apiWayBillDomain}/waybill/broker_report_capital_flow/getBankCode/${paramObj}`;
HTTP.get(apiUrl, {}, (res, err) => {
cb(res, err);
});
}
后端代码(我的是根据银行名称模糊查询银行名称与英文缩写,选中银行,获取银行名称缩写进行下一步业务),根据自己业务修改请求参数,写自己业务实现类。
@GetMapping(value = "/waybill/broker_report_capital_flow/getBankCode/{bankName}")
public List<BankCode> getBankCode(@PathVariable("bankName") String bankName){
return waybillBrokerReportCapitalFlowService.selectBankCode(bankName);
}
更多推荐
已为社区贡献1条内容
所有评论(0)