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

那是遇知吧

已于 2023-06-16 16:24:43 修改

阅读量588

点赞数

文章标签： view design vue.js

于 2023-06-16 11:23:24 首次发布

本文链接：https://blog.csdn.net/weixin_41406727/article/details/131243327

版权

该段代码展示了在Vue.js中如何使用Select组件实现对搜索词的监听(on-query-change)和模糊查询。当输入值为数字时，对projectList进行过滤操作；若值为空，则重置为全部项目数据并清空v-model的值。方法searchInner处理了空格清除和数据筛选逻辑。

摘要由CSDN通过智能技术生成

直接上代码

主要是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 = '';
            }
        }