关于前端:记录一个Ant-Design-Vue-Select组件的隐藏属性模糊查询-微坑

好忘性不如烂笔头，记录最近遇到的一个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-option
v-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 = arr
console.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返回恒真