Vue antdv a-select 内容搜索过滤（filterOption，包含 vue2 vue3）

• 在使用 a-select 的时候，有时候需要支持搜索，这个时候需要跟选项框中的内容进行匹配。

• 这个是要就需要使用到 filterOption 这个属性了

• vue2

  <template>
    <a-select
      showSearch
      style="width: 200px"
      placeholder="输入搜索内容"
      :filterOption="filterOption"
      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
    >
      <a-select-option :value="0">DZM</a-select-option>
      <a-select-option :value="1">XYQ</a-select-option>
      <a-select-option :value="2">DJY</a-select-option>
    </a-select>
  </template>
  
  <script>
  export default {
    methods: {
      // 将输入的内容与显示的内容进行匹配
      filterOption (value, option) {
        return option.componentOptions.children[0].text.indexOf(value) >= 0
      }
    }
  }
  </script>
  

• vue3

  <template>
    <a-select
      show-search
      style="width: 200px"
      placeholder="输入搜索内容"
      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      :filter-option="filterOption"
    >
      <a-select-option :value="0">DZM</a-select-option>
      <a-select-option :value="1">XYQ</a-select-option>
      <a-select-option :value="2">DJY</a-select-option>
    </a-select>
  </template>
  
  <script setup>
  // 模糊匹配
  function filterOption (input, option) {
    return `${option.key}`.toLowerCase().includes(`${input || ''}`.toLowerCase())
  }
  </script>
  

• 效果