vue实现下拉框动态筛选

最新推荐文章于 2025-02-26 15:00:00 发布

我就是程序猿

最新推荐文章于 2025-02-26 15:00:00 发布

阅读量4.8k

点赞数 1

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_36323075/article/details/110455414

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

实现效果如下：
在这里插入图片描述

具体代码入下：
1、其中：filterable :filter-method="dataFilter"为过滤的关键

 <el-col :span="24" v-if="showTransact">
                    <el-form-item label="New Issue Owner:">
                    <el-select v-model="form.turn_to_transact" :disabled='isEditResolution' placeholder="Please Choose Administrative Person" filterable :filter-method="dataFilter" clearable>
                            <el-option v-for="item in optionsCopy" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-option>
                    </el-select>
                    </el-form-item>
                </el-col>

2、dataFilter的方法
首先要初始化一个approveUserOption，并且让optionsCopy = approveUserOption。如果为则给optionsCopy 复制approveUserOption。

    dataFilter(val) {
        if (val) { //val存在
        debugger;
           var str = ".*"+val.toLowerCase()+".*"
           let reg = new RegExp(str)
          this.optionsCopy = this.optionsCopy.filter((item) => {
            if(item.label){
                return reg.test((item.label.toLowerCase()).replaceAll(" ",""))
            }else{
                return false;
            }
          })
        }else{
            this.optionsCopy = this.approveUserOption;
        }
        if(this.optionsCopy.length == 0){
            this.optionsCopy = this.approveUserOption;
        }
      }