当前位置: 首页 > Web前端 > HTML

el-自动完成的使用

时间:2023-03-27 22:57:28 HTML

效果图业务场景需要根据用户输入的关键词进行模糊匹配进行提醒,然后选择查询。后台代码控制层@PreAuthorize("@ss.hasPermi('system:qymp:list')")@GetMapping("/getNsrmc")publicAjaxResultgetNsrmc(){List>nsrmcAndValue=sysQympService.getNsrmc();returnAjaxResult.success(nsrmcAndValue);}xml层这里说明一下,使用Map类型接收结果,否则前端el-autocomplete不会渲染selectnsrmcfromtbl_base_qympxxwhereyxbz='0'前端代码querySearch(queryString,cb){getNsrmc().then(response=>{this.restaurants=response.data//console.log("之前:"+this.restaurants)//letresults=queryString?this.restaurants.filter(nsrmc=>nsrmc.indexOf(queryString)>-1):this.restaurants//匹配所有字段letresults=this.restaurants.filter(nsrmcs=>nsrmcs.nsrmc.indexOf(queryString)>-1)//从头匹配//letresults=this.restaurants.filter(nsrmcs=>nsrmcs.nsrmc.indexOf(queryString)===-1)//console.log("after:"+results)//调用回调返回建议列表的数据cb(results)})},参考链接