生活随笔
收集整理的這篇文章主要介紹了
vue实现下拉框动态筛选
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現效果如下：
具體代碼入下：
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实现下拉框动态筛选的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
