好忘性不如烂笔头，记录最近遇到的一个Select组件多暗藏属性含糊查问的需要，以及踩的一个微坑。

1. 实现简略的含糊查问

如果只是对Select组件Option的lable/value做含糊查问的话, 文档或者其余文章都讲过，能够应用上面的查问

<a-select    v-model="search_obj.advertiser"    style="width: 240px;"    mode="multiple"    :maxTagCount="1"                        :allowClear="true"    :filterOption="filterOption">    <a-select-option value="">        全副    </a-select-option>    <a-select-option  v-for="(value, key) in show_advertiser_map" :value="value.advertiser_id">        {{value.alias}}    </a-select-option></a-select>
filterOption(input, option) {      return (        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0      );},

如下图所示:能够对option.componentOptions.children[0].text或者option.componentOptions.propsData.value做过滤，就能实现含糊查问的成果

2.实现暗藏属性的含糊查问

2.1正确思路：自定义attrs属性

<a-select-optionv-for="(value, key) in show_advertiser_map":value="value.advertiser_id":user_name="value.user_name">    {{value.alias}}</a-select-option>

往a-select-option标签减少了一个user_name的属性

如图，就把问题转化为了情景1，应用filterOption函数过滤选项就好了，然而如果有很多个属性须要过滤呢？岂不是要增加很多个attrs属性,于是我尝试了更改思路

2.2 微坑思路：动静更改option数组show_advertiser_map

option是应用数组循环渲染进去的，那么监听input的变动，动静调整数组不就好了么？

<a-select    v-model="search_obj.advertiser"    style="width: 240px;"    mode="multiple"    :maxTagCount="1"                        :allowClear="true"    @search="filterAdvertiser">    <a-select-option value="">        全副    </a-select-option>    <a-select-option  v-for="(value, key) in show_advertiser_map" :value="value.advertiser_id">        {{value.alias}}    </a-select-option></a-select>
if (val == '') {    this.show_advertiser_map = this.advertiser_map[this.search_obj.game]        return;    }    let arr = [];    this.advertiser_map[this.search_obj.game].forEach((v) => {        if (v.alias.indexOf(val) > -1            || v.advertiser_id.indexOf(val) > -1            || v.advertiser_name.indexOf(val) > -1            || v.company_name.indexOf(val) > -1            || v.platform == val            || v.user_name.indexOf(val) > -1        ) {            arr.push(v)        }    })this.show_advertiser_map = arrconsole.log(this.show_advertiser_map)

我打印了最终原数组的值，发现是合乎预期的，然而实际上select组件选项却仍旧是对vlaue做了过滤，导致渲染进去的后果是不合乎预期的。可是文档外面写的是filterOption接管bool/function，默认值是true，于是我尝试减少：

:filterOption="true"

仍旧对vlaue做了过滤

再次尝试减少：

:filterOption="() => { return true; }"

合乎预期！Done！

而后我尝试看Select组件对应的代码:

 filterOption: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].func]),

的确是承受bool/function

     var filterFn = this.$props.filterOption;      if ((0, _propsUtil.hasProp)(this, 'filterOption')) {        if (filterFn === true) {          filterFn = defaultFilter.bind(this);        }      } else {        filterFn = defaultFilter.bind(this);      }

然而当是true，却有一个defaultFilter，ok, 离假相越来越近了,持续看defaultFilter是啥

export function defaultFilterFn(input, child) {  var props = getPropsData(child);  if (props.disabled) {    return false;  }  var value = getPropValue(child, this.optionFilterProp);  if (value.length && value[0].text) {    value = value[0].text;  } else {    value = String(value);  }  return value.toLowerCase().indexOf(input.toLowerCase()) > -1;}

哦豁，是对value进行过滤，怪不得

3.总结

  • 不指定filterOption, 是对选项的value进行过滤；
  • 一般指定filterOption, 能够对选项的lable/value进行过滤；
  • 间接动静调整Array, 须要指定filterOption返回恒真