关于前端:记录一个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 返回恒真