there is a requirement that when Select selects a city, it needs fuzzy search, which supports not only Chinese, but also pinyin, acronyms and so on. The back end will give me the corresponding fields, but I find that using filter-method to pass in functions will allow me to write a lot of redundant code, which goes directly to the example
.<el-select v-model="value8" :filter-method="handleCityFilter" filterable placeholder="">
<el-option
v-for="item in filterOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
handleCityFilter (val) {
// filter balabalbalb....
}this method also needs to cache once. Every time options, puts the cached options Filter in the Filter function and assigns it to filterOptions, it feels very troublesome and not elegant. Ideally, it should do everything in the function handleCityFilter
.<el-select v-model="value8" filterable placeholder="">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>the official example is that options is not cached, but it can also be searched vaguely, so I want to go to the source code to see how to implement it
.// select.vue
this.broadcast("ElOption", "queryChange", val);
// option.vue
queryChange(query) {
// query
let parsedQuery = String(query).replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, "\\$1");
this.visible = new RegExp(parsedQuery, "i").test(this.currentLabel) || this.created;
if (!this.visible) {
this.select.filteredOptionsCount--;
}
}is finally locked here, and it is found that the options is built into regular hiding, so it must not be possible to do this through filterMethod. Do you gods have a better solution to this need?