antd for vue select ^3.2.0搜索问题?

vincent
  • 21

"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值
    image.png

第二种解决方法(优选)

  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丢进去不太行的样子,边界距离上下不一致,需要再调整下
image.png

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

其他略

回复
阅读 258
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏