vue3 中 使用 antd中的select 组件的带搜索框 展开后可对选项进行筛选搜索功能

news2025/1/20 22:39:49

鼠标进入以后下拉显示:
在这里插入图片描述
输入字符串以后:
在这里插入图片描述
可以看出对数据进行了筛选。

具体代码:

   结构上:
     <a-select
            v-model:value="formState.formFlow"
            show-search
            allowClear
            placeholder="输入选择流程"
            :options="options"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
            :filter-option="filterOption"
          />

js:
  const options = ref([]);

  /**
   * 输入选择器--change事件
   * */
  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };
  /**
   * 输入选择器--blur事件
   * */
  const handleBlur = () => {
    console.log('blur');
  };
  /**
   * 输入选择器--focus事件
   * */
  const handleFocus = () => {
    console.log('focus');
  };
  /**
   * 输入选择器--对数据进行筛选
   * */
  const filterOption = (input, option) => {
    let value = option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    return value;
  };
    /**
   * 生命周期--onMounted
   * 在实例创建完成后调用,此时数据观测和事件配置已完成,DOM 已经渲染完成。
   * */
  onMounted(() => {
    console.log('onMounted ');
	//请求接口
    _getFlowlist();
  });
  /**
   * 数据初始化
   * 获取流程列表
   * */
  const _getFlowlist = () => {
    console.log('获取流程列表');
    //API请求
    getFlowlist().then((res) => {
      console.log(res, 'res');
      options.value = res;
    });
  };

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1674003.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

生产透明化,交付无烦恼

生产进度总延误 质量把控总失守 计划赶不上变化 沟通不畅易误解 ...... 这些问题可能在一些工厂管理中几乎每天都在上演。 在如今快速变化的市场环境中&#xff0c;企业的生产效率和交付能力成为了衡量其竞争力的关键指标。而要实现高效、准确的生产和交付&#xff0c;透明化的…

无人机的用途

无人机&#xff0c;即无人驾驶飞机&#xff0c;其用途广泛且多样&#xff0c;涉及到多个领域。 在农业领域&#xff0c;无人机通过搭载各种传感器和相机&#xff0c;可以对农田进行空中巡视&#xff0c;收集农田数据&#xff0c;如土壤含水量、气温、湿度等&#xff0c;以及植…

《一》Word文字编辑软件---架构设计分析

1&#xff0c;简单介绍 今天&#xff0c;我们来模拟offic软件中的word文档&#xff0c;运行如图&#xff1a; 运行程序后会出现主界面&#xff0c;顶端的菜单栏包括“文件”“编辑”“格式”“窗口”和“帮助五个主菜单。 菜单栏下面是工具栏&#xff0c;包含了系统常用的功能按…

【2024】最新开源版 酒店预约小程序源码 酒店管理系统源码

源码简介&#xff1a; 随着移动互联网的快速发展&#xff0c;酒店行业也逐渐步入数字化、智能化的新时代。通过引入酒店预约小程序和酒店管理系统&#xff0c;酒店可以实现线上线下无缝对接&#xff0c;提高客户体验和服务质量。 分享一款【2024】最新酒店预约小程序源码、酒…

MyBatis缓存的概念

缓存回顾 什么是缓存&#xff1f; 缓存就是内存中的数据&#xff0c;常常来自对数据库查询结果的保存。使用缓存可以避免频繁与数据库交互&#xff0c;进而提高 响应速度 。 MyBatis 对缓存的支持 MyBatis 也提供了对缓存的支持&#xff0c;分为 一级缓存 和 二级缓存。可以…

ubuntu安装vim

安装vim 命令&#xff1a; apt istall vim

传感数据分析——加速度、速度与位移

传感数据分析——加速度、速度与位移 在许多科学和工程应用中&#xff0c;传感器数据的分析是一项至关重要的任务。特别是在运动、运输、结构监测等领域&#xff0c;传感器能够提供有关物体运动和变形的宝贵信息。本文将介绍如何利用Python进行传感器数据分析&#xff0c;重点…

免费申请HTTPS证书的几种方法

SSL证书&#xff08;Secure Sockets Layer Certificate&#xff09;是数字证书的一种&#xff0c;类似于驾驶证、护照和营业执照的电子副本。它是由受信任的数字证书颁发机构&#xff08;CA&#xff09;在验证服务器身份后颁发的&#xff0c;用于确保网络通信的安全性和加密性。…

前端面试:项目细节|项目重难点|已工作|做分享

面试官提问&#xff1a;分享一个项目中记忆比较深刻的需求&#xff1f;说说你是怎么解决的&#xff1f;解决过程有没有遇到什么困难&#xff1f; 答&#xff1a;我的回答&#xff08;我分点写思路&#xff0c;便于大家观看&#xff09;&#xff1a; &#xff08;1&#xff09…

如何实现数字化校园的高效运维

随着科技开展&#xff0c;国家大力支持各级各类学校建造数字化学校&#xff0c;综合利用互联网、大数据、人工智能和虚拟现实技能探究未来教育教育新模式。因为数字化学校的快速开展&#xff0c;学校网内设备类型很多&#xff0c;网络拓扑杂乱&#xff0c;信息运用繁复。各部门…

如何实现短链接跳转到微信小程序?怎么保证永久有效?

家人们&#xff0c;在如今这互联网高度发达的时代&#xff0c;流量那可真是生命线啊&#xff01;那每个运营者都得面对的一个关键问题就是&#xff1a;咋有效地进行引流。今儿个&#xff0c;咱就好好唠唠咋实现短链接跳转到微信小程序&#xff0c;还有咋保证小程序短链接能永久…

Linux(多线程)

//blockQueue.hpp #pragma once #include <iostream> #include <queue> #include <pthread.h> const int gcap 5; template <class T> class BlockQueue { public:BlockQueue(const int cap gcap):_cap(cap)//初始化阻塞队列的容量{pthread_mutex_in…

新一代GPT!GPT-4O:更快、更懂人类情感的人工智能新纪元

今天凌晨&#xff08;5.14凌晨&#xff09;&#xff0c;OpenAI 的 GPT-4O 版本在自然语言处理领域带来了革命性的改变。不仅在处理速度上获得了显著提升&#xff0c;GPT-4O 还增加了对人类情感的理解能力&#xff0c;这使得它在与人类的交互中更加自然和富有同理心。本文将深入…

相同的树LeetCode

100. 相同的树 - 力扣&#xff08;LeetCode100. 相同的树 - 力扣&#xff08; 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 /*** Definition…

Python 运筹优化13 Thompson Sampling 解读

说明 这部分应该是Multi-Armed Bandit的最后一部分了。 内容 1 On Line Ads 这个实验&#xff0c;最初的目的就是为了选出最佳的广告。首先&#xff0c;通过伯努利分布&#xff0c;模拟了某个广告的有效率。在真实场景里&#xff0c;我们是无法知道那个广告更好的。可能在t…

css中用于设置光标颜色的属性

caret-color 是一个 CSS 属性&#xff0c;它用于定义输入光标&#xff08;caret&#xff09;的颜色。这里的“插入光标”&#xff08;insertion caret&#xff09;指的是在网页的可编辑器区域内&#xff0c;用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东…

25考研数学,强化跟张宇还是武忠祥?

高数基础阶段结束&#xff0c;每年会有很多人&#xff0c;由于各种原因&#xff0c;在强化阶段换老师。 要提醒大家的是&#xff1a;25的情况和以前不一样&#xff01; 原因包括各位老师的课程大幅改动&#xff0c;以及24命题的变化。 首先看可行性&#xff1a;强化换武忠祥可…

可重构柔性装配产线:为工业制造领域注入了新的活力

随着科技的飞速发展&#xff0c;智能制造正逐渐成为引领工业革新的重要力量。在这一浪潮中&#xff0c;可重构柔性装配产线以其独特的技术优势和创新理念&#xff0c;为工业制造领域注入了新的活力&#xff0c;开启了创新驱动的智能制造新篇章。 可重构柔性装配产线是基于富唯智…

【全开源】Java情侣飞行棋系统微信小程序+H5+微信公众号+APP 源码

情侣飞行棋是一款专为情侣设计的游戏&#xff0c;具有多种特色功能和优势 特色功能&#xff1a; 实时互动&#xff1a;情侣飞行棋支持实时互动&#xff0c;情侣们可以同时进行游戏&#xff0c;共同制定策略、掷骰子、移动棋子等操作。这种实时的互动方式让情侣们更加紧密地联系…

OV通配符/泛域名SSL证书怎么获取和安装

OV通配符/泛域名SSL证书的获取和安装主要可以分为以下几个步骤&#xff1a; 一、获取证书 1. 选择服务商 选择一个提供OV通配符SSL证书的服务商&#xff0c;例如JoySSL。 2. 提交申请 在服务商网站上选择OV通配符SSL证书产品&#xff0c;填入基础信息&#xff0c;如公司名…