antd for vue select ^3.2.0搜索问题？

Question

"ant-design-vue": "^3.2.0",
显示内容是两部分组合，其实search就组合了下，目前optionFilterProp="label"不管传入label，search，value都搜不到任何东西（一开始使用options传入，没有用a-select-option各种内容时是可以的）

<a-select
    v-model:value="valueShow"
    label-in-value
    :placeholder="disabled ? '': placeholder || '请选择'"
    allowClear
    @change="handleChange"
    optionFilterProp="label"
    show-search
    :disabled="disabled"
  >
    <a-select-option v-for="(item, index) of options" :key="item.search + index"
      :value="item.value" >
      {{item.label}}
      <a-tag color="blue">{{item.ip}}</a-tag>
      <a-tag color="blue">{{item.type}}</a-tag>
      {{item.search}}
    </a-select-option>
  </a-select>

更新

第一种解决方法

看见有人提到filterOptionValue，官方api没有找到这个，就功能来说类似options.filter(item => { return boolean})的过滤函数返回boolean。如下右侧代码可以实现过滤功能，不过op值和设想的差异很大：

1. 有value值：但用value值是不会成功筛选的
2. key值：key值是循环时绑定的
3. label值：找不到label，所以label去哪儿了？仔细看了下之前写的代码，没有给指定label值
4. search值：当然也没有search值
   

第二种解决方法（优选）

1. 把上面没有指定的label和search绑上去
2. 删除filterOptionValue相关代码

3. 指定optionFilterPropValue为search
   修改后的代码大致如下

   <a-select
       v-model:value="valueShow"
       :placeholder="disabled ? '': placeholder || '请选择'"
       allowClear
       @change="handleChange"
       optionFilterProp="search"
       show-search
       :disabled="disabled"
     >
       <a-select-option v-for="(item, index) of options" :key="item.search + '__' +index"
   :value="item.value" :label="item.label" :search="item.search">
   <a-tag color="blue">{{item.type}}</a-tag>
   <a-tag color="blue">{{item.ip}}</a-tag>
   {{item.label}}
       </a-select-option>
     </a-select>

   简单过下相关源码

过滤逻辑

不存在api中可用还能生效总觉得很诡异，黑盒不知道到底咋回事儿，执行筛选规则的主要逻辑代码如下

 var filterFunc = customizeFilter ? filterOptionValue : function (_, option) {
      // Use provided `optionFilterProp`
      if (optionFilterPropValue) {
        return includes(option[optionFilterPropValue], upperSearch);
      } // Auto select `label` or `value` by option type

      if (option[fieldOptions]) {
        // hack `fieldLabel` since `OptionGroup` children is not `label`
        return includes(option[fieldLabel !== 'children' ? fieldLabel : 'label'], upperSearch);
      }

      return includes(option[fieldValue], upperSearch);
    };

大致就是

1. filterOptionValue 优先级最高：customizeFilter= typeof filterOptionValue === 'function'，如果有这个回调函数，优先使用这个（上面第一种方法）

2. 否则走内部函数
   a) optionFilterPropValue：是否有指定这个，如果有，那这个用（上面第二种方法）
   b) option[fieldOptions]：是否存在
   c) 默认使用value（一开始什么都不用的时候，走的是这个，默认筛选就很诡异，一般最简单的设计：所见即所得，这里设计了一个必然存在，但大概率非所见所得的属性）

   filterOptionValue相关

   选择完规则后对options进行过滤，与filterOptionValue相关的过滤如下

    options.value.forEach(function (item) {
     // …
     if (filterFunc(searchValueVal, wrapOption(item))) {
       filteredOptions.push(item);
     }
   });
   

   而这些都属于一个计算属性，最后返回过滤后的options

     return computed(function () {
       // …
       return filteredOptions;
     });
   });
   

样式问题

直接把tag丢进去不太行的样子，边界距离上下不一致，需要再调整下

原因line-height，直接调整这个会影响里面的其他元素，又因为包裹的是个relative，tag用也用relative再微调下

其他略