vue系列：使用vue3、ant-d，a-select下拉的搜索功能

最新推荐文章于 2024-07-17 14:33:07 发布

浪潮行舟

最新推荐文章于 2024-07-17 14:33:07 发布

阅读量756

点赞数 2

分类专栏：前端大屏 VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/i_nur/article/details/136809049

版权

前端同时被 3 个专栏收录

53 篇文章 1 订阅

订阅专栏

VUE

27 篇文章 0 订阅

订阅专栏

大屏

3 篇文章 0 订阅

订阅专栏

背景

记录一下
大屏项目中，下拉数据过多，想使用下拉搜索功能；
输入汉字，匹配对应的项目；

解决方案

关键代码如下：
a-select控件


			<a-select
                v-model:value="state.schemeInfo.monitorList"
                show-search
                :options="state.monitorOptions"
                :filter-option="monitorFilterOption"
                @change="onSelectIndex"
              ></a-select>

projectFilterOption 匹配事件

const projectFilterOption = (input: string, option: any) => {
  const label = state.polderOptions.find(item => item.value === option.value)?.label || ''
  // 根据label来过滤
  return label.toLowerCase().includes(input.toLowerCase())
}