版本
element ui 2.15.6
问题描述
select
问题代码
filterMethod(keyword) {
this.searchOptions = this.options.filter(item =>
item[this.optionWord.label].includes(keyword)
)
}
解决方案:
查看源码后发现,自带默认检索方法是使用的v-show隐藏,并没有删除没有命中的元素DOM
select
el-option
通过代码可知,使用默认检索方法,会调取broadcast方法,触发el-option的queryChange方法来过滤命中的项,并通过v-show隐藏非命中项
故,自定义方法不能使用filter方法,可以使用map,不改变原数组长度,代码如下:
<el-option
v-for="item in searchOptions"
:key="item.id"
:label="item[optionWord.label]"
:value="item[optionWord.value]"
v-show="!item.isShow"
>
</el-option>
filterMethod(keyword) {
this.searchOptions = this.options.map(item => {
return {
...item,
isShow: item[this.optionWord.label].includes(keyword)
}
})
},
若使用自带检索方法,可调取broadcast
filterMethod(keyword) {
this.$refs['elSelect'].filteredOptionsCount =
this.$refs['elSelect'].optionsCount // 解决检索结果为空时导致下拉框不展示空数据字样
this.$refs['elSelect'].broadcast('ElOption', 'queryChange', keyword)
}