526互联

Vue element 关于下拉框输入模糊查询

发布时间 2023-11-25 10:53:43作者: 小码子

最近又一个新的需求，在输入框实现输入框下拉模糊查询

开始对elementui还不熟悉，不知道怎么用，不过通过网上查阅资料发现使用

<el-col :span="12">
                        <el-autocomplete
                                v-model="form.name"
                                :fetch-suggestions="querySearch"
                                placeholder="提出人"
                                :trigger-on-focus="false"
                                @select="handleSelect"
                                @input="changeData"
                        ></el-autocomplete>
                    </el-col>

用el-autocomplete这个标签

 - `querySearch(queryString, cb)`：该函数用于根据用户输入的查询字符串获取匹配的结果。它首先将当前的 `restaurants` 数组赋值给 `results` 变量，然后根据查询字符串使用 `createStateFilter` 方法创建一个过滤函数，对 `restaurants` 数组进行过滤，最后通过回调函数 `cb` 返回过滤结果。 - `createStateFilter(queryString)`：该函数用于创建一个过滤函数，用于过滤 `restaurants` 数组中的元素。它返回一个箭头函数，该箭头函数根据查询字符串和状态值进行过滤，如果状态值中包含查询字符串，则返回 `true`，否则返回 `false`。 - `handleSelect(item)`：当用户点击选中一个建议项时触发的事件处理函数。它将选中的建议项的值赋值给 `name`、`select`，然后调用 `getnumber()` 方法。 - `changeData(value)`：当输入框的值改变时触发的事件处理函数。如果输入框的值不为空，则调用 `handleChange()` 方法；否则将 `image` 和 `select` 清空。 - `handleChange()`：异步处理输入框的值变化的方法。它构造一个参数对象 `param`，然后调用接口 `operateMgmt.synthesisWorks()` 发送请求。如果请求成功，将返回的数据映射为新的 `restaurants` 数组，并更新 `image` 和 `worksId` 的值；如果请求失败，将显示错误消息。 这段代码的作用是根据用户输入的查询字符串，通过调用接口获取匹配的结果，并更新相关的数据。同时，提供了选中建议项和输入框值改变的事件处理函数。

这个是上面代码的解释

后面的js

querySearch(queryString, cb) {
                    var restaurants = this.restaurants;
                    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                    // 调用 callback 返回建议列表的数据
                    cb(results);
                },
                createFilter(queryString) {
                    return (restaurant) => {
                        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                    };
                },
                //@select 点击选中建议项时触发
                handleSelect(item) {
                    console.log(item)
                    console.log(this.form.name)
                },
                //@input 在 Input 值改变时触发
                changeData(value){
                    if(value!=''){
                        this.handleChange()
                    }else {
                        this.from.name = ""
                    }
                },
                 convertArrayToObject(array) {
                        const uniqueValues = Array.from(new Set(array)); // 使用 Set 去除重复值，并转换为数组
                        return uniqueValues.map(item => {
                            return {
                                value: item,
                                name: item
                            };
                        });
                    },
                            // 接口
                async handleChange() {
                    await axios.post("index/findByName",qs.stringify({name:this.form.name})) .then(rt =>{
                        this.restaurants = this.convertArrayToObject(rt.data)
                        console.log(this.restaurants)
                    })
                }

我的数据返回的是一个数组，报了一个这样的错误(索引):467 Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')

后来我看了官方文档，要按它们需要的一个{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },格式，我就写了一个这样的函数还能去除查出来的重复元素

 convertArrayToObject(array)上面代码，然后就能正常显示了。
不过我看到网上还有另一种方法
<el-select v-model="listQuery.deptCode" clearable filterable placeholder="请选择" style="top: -6px;">
        <el-option v-for="o in DeptOptions" 
          :key="o.code" 
          :label="o.name" 
          :value="o.name" />
      </el-select>
getOptionsData() {
      getDictInfo().then(res => {
        this.DeptOptions = res.data.list
        console.log('treeList', this.DeptOptions)
      })
    },

 

这个使用选项框标签的方式选择