實現效果如下：


具體代碼入下：
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;}} 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue实现下拉框动态筛选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。