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" :
·
实现效果如下:
具体代码入下:
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;
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)