iview的select数字模糊查询功能实现

直接上代码

主要是on-query-change这个方法是监听搜索词的val值

<Select
                                @on-change="changeProjectName"
                                @on-clear="clearProjectName"
                                v-model="ruleForm.projectId"
                                clearable
                                filterable
                                @on-query-change="searchInner"
                                placeholder="请选择项目"
                                class="org-select"
                            >
                                <Option :label="item.proName" :value="item.id" v-for="item in projectListSearch" :key="item.id"
                                    >
                                </Option>
                            </Select>

思路是这样， projectList是全部项目数据，projectListSearch是模糊查询的下拉数据

然后判断是否是数字类型!isNaN(parseFloat(querys)) && isFinite(querys)，还要就是要清除下空格

如果值为‘’，就清空v-model的值，并让模糊下拉数据等于全部数据即可

projectList: [],
projectListSearch: [],

searchInner (query) {
                let querys = query.replace(/\s/g,"") //清除空格
            // 数字进
            if(!isNaN(parseFloat(querys)) && isFinite(querys)){
                let fCheckBoxCount = this.projectList.filter((item) => {
                    return `${item.proName}`.includes(querys)
                });
                this.projectListSearch = fCheckBoxCount;
            } else if (querys == '') {
                this.projectListSearch = this.projectList;
                this.ruleForm.projectNm = '';
                this.ruleForm.projectId = '';
            }
        }