效果图

业务场景

须要依据用户输出关键词含糊匹配进行揭示进而抉择查问。

后端口代码

controll层

@PreAuthorize("@ss.hasPermi('system:qymp:list')")@GetMapping("/getNsrmc")public AjaxResult getNsrmc() {    List<Map<String,String>> nsrmcAndValue = sysQympService.getNsrmc();    return AjaxResult.success(nsrmcAndValue);}

xml层

这里阐明一下，用Map类型接管后果，否则前端el-autocomplete不渲染

<select id="getNsrmc" resultType="java.util.Map">    select nsrmc from tbl_base_qympxx where yxbz = '0'</select>

前端代码

<el-form-item label="企业名称" prop="nsrmc">    <el-autocomplete      value-key="nsrmc"       class="inline-input"       v-model="queryParams.nsrmc"       :fetch-suggestions="querySearch"       placeholder="请输出企业名称"       :trigger-on-focus="false"       clearable       size="small"       @keyup.enter.native="handleQuery"       style="width: 350px"    ></el-autocomplete></el-form-item>

querySearch(queryString, cb) {      getNsrmc().then(response => {        this.restaurants = response.data        // console.log("before："+this.restaurants)        // let results = queryString ? this.restaurants.filter(nsrmc=>nsrmc.indexOf(queryString)>-1) : this.restaurants        // 全字段匹配        let results = this.restaurants.filter(nsrmcs => nsrmcs.nsrmc.indexOf(queryString) > -1)        // 从头开始匹配        // let results = this.restaurants.filter(nsrmcs => nsrmcs.nsrmc.indexOf(queryString) === -1)        // console.log("after："+results)        // 调用 callback 返回倡议列表的数据        cb(results)      })    },

参考链接

本文由博客一文多发平台 OpenWrite 公布！