2021-09-14

最新推荐文章于 2025-05-27 21:29:35 发布

六只羊l

最新推荐文章于 2025-05-27 21:29:35 发布

阅读量86

点赞数

分类专栏： antd 文章标签： node.js html5 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45846702/article/details/120298892

版权

antd 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Ant Design Vue的下拉选择器中，通过自定义filterOption方法，实现在输入框中输入内容时筛选选项列表。作者展示了如何使用indexOf方法匹配选项的文本，以便于用户高效搜索所需内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant design vue filterTreeNode自定义实现过滤

<template>
  <a-select
    showSearch
    :filterOption="filterOption"
    :getPopupContainer="(triggerNode) => triggerNode.parentNode"
    style="width: 200px"
    placeholder="输入搜索内容"
  >
    <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>