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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果