效果图

业务场景

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

后端口代码

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 公布！