el-select filter-method 自定义搜索方法 检索关键词问题

版本

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)
    }