antd vue a-select 搜索

news2025/1/21 18:44:41

数据结构 

  list: [
        { name: "序号", id: 0, show: true },
        { name: "出库单编号", id: 1, show: false },
        { name: "wbs元素", id: 2, show: true },
        { name: "序号1", id: 3, show: true },
        { name: "出库单编号1", id: 4, show: false },
        { name: "wbs元素1", id: 5, show: true },
        { name: "序号2", id: 6, show: true },
        { name: "出库单编号2", id: 7, show: false },
        { name: "wbs元素2", id: 8, show: true },
        { name: "序号3", id: 9, show: true },
        { name: "出库单编号3", id: 10, show: false },
        { name: "wbs元素3", id: 11, show: true },
        { name: "序号4", id: 12, show: true },
        { name: "出库单编号4", id: 13, show: false },
        { name: "wbs元素4", id: 14, show: true },
    ],

html

                <a-select v-model="state.searchValue" show-search placeholder="字段名称" class='w-[70%]'
                    :filter-option="filterOption" @change="handleChange" :options="state.list" :fieldNames="{
        label: 'name',
        value: 'id',
    }" allowClear>
                </a-select>

// fieldNames 配置label和value 中 在数组中使用的字段

js  搜索过滤

const filterOption = (input, option) => {

    return (option?.name ?? "").includes(input);

};

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

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

相关文章

每天五分钟深度学习pytorch:pytorch中的广播机制是什么?

本文重点 在pytorch中经常有张量和张量之间的运算,那么有一点需要注意,那就是维度要匹配,如果维度不匹配就有可能出现问题。如果维度不一致,此时也可以同时进行操作,此时就需要使用pytorch中的广播机制,本节课程就讲解pytorch中的广播机制。 广播机制示意图 如上就是py…

基于C#的计算机与安捷伦34970A通信方法

概述 安捷伦34970A采集数据&#xff0c;34970A支持RS232接口&#xff0c;但是如果直接用winform自带的seriaport类基本是没必要使用的&#xff0c;安捷伦等仪表通讯需要用到VISA的库。 库的获取 1. 是德科技的IO Library. 2. NI下载NI-VISA. 两者用法接近. 代码如下 using…

【数据分析基础】实验numpy、pandas和matplolib

文件score.xlsx 中存放了学生的各个科目的考试成绩&#xff08;如下图&#xff09;&#xff0c; 1. 编程实现&#xff1a;输入任意一个学号&#xff0c;将该学号对应的成绩&#xff0c;通过雷达图显示。 &#xff08;1&#xff09;程序代码&#xff1a; import pandas as pd…

在Java中使用SeleniumAPI,超详细

Java中 Selenium相关操作 1 定位元素 1.1 css选择器定位元素 就是定位到页面的元素&#xff0c;本质上就是一个一个的语法 下面举几个具体的例子&#xff1a; 类选择器 按照给定的 class 属性的值&#xff0c;选择所有匹配的元素。 语法&#xff1a;.classname 例子&am…

【中篇】从 YOLOv1 到 YOLOv8 的 YOLO 物体检测模型历史

YOLO 型号之所以闻名遐迩,主要有两个原因:其速度和准确性令人印象深刻,而且能够快速、可靠地检测图像中的物体。上回我解释了Yolo v1, 今天从Yolov2开始。 YOLOv2:更好、更快、更强 2017 年 7 月一个闷热的星期二下午,雷德蒙(Joseph Redmon, Yolo创始人)再次走上舞台。 …

MASA:匹配一切、分割一切、跟踪一切

摘要 在复杂场景中跨视频帧稳健地关联相同对象是许多应用的关键&#xff0c;特别是多目标跟踪&#xff08;MOT&#xff09;。当前方法主要依赖于标注的特定领域视频数据集&#xff0c;这限制了学习到的相似度嵌入的跨域泛化能力。我们提出了MASA&#xff0c;一种新颖的方法用于…

嵌入式Linux系统编程 — 3.1 Linux系统中的文件类型

目录 1 Linux 系统中的文件类型简介 2 普通文件 2.1 什么是普通文件 2.2 普通文件分类 3 目录文件 4 字符设备文件和块设备文件 4.1 什么是设备文件 4.2 查看设备文件的方法&#xff1a; 5 符号链接文件&#xff08;link&#xff09; 5.1 什么是符号链接文件 5.2 如…

生成式人工智能 - stable diffusion web-ui安装教程

一、Stable Diffusion WEB UI 屌丝劲发作了,所以本地调试了Stable Diffusion之后,就去看了一下Stable Diffusion WEB UI,网络上各种打包套件什么的好像很火。国内的也就这个层次了,老外搞创新,国内跟着屁股后面搞搞应用层,就叫大神了。 不扯闲篇了,我们这里从git源码直接…

【vscode-快捷键 一键JSON格式化】

网上有很多JSON格式化工具&#xff0c;也有很多好用的在线json格式化工具。但是其实Vscode里面的可以直接格式化JSON&#xff0c;这里分享一个我常用的小插件 Prettify JSON 未格式化的JSON数据 召唤出命令行&#xff0c;输入prettify JSON 即可! ✿✿ヽ(▽)ノ✿

C# WinForm —— 26 ImageList 介绍

1. 简介 图片集合&#xff0c;用于存储图像的资源&#xff0c;并在关联控件中显示出来 可以通过 索引、键名 访问每张图片 没有事件 2. 属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般以 imgList 开头ClolorDepth用于呈现图像的颜色数&#xff0c;默…

立创小tips

立创小tips 原理图中 1-修改图纸属性 保存完&#xff0c;绘制原理图的界面就出现了&#xff0c;然后我们鼠标点击原理图的边缘变成红色就可以高边表格的属性了。 2-鼠标右键可以移动整个原理图 3-查看封装 点击任意一个元器件&#xff0c;在右侧就会显示封装属性&#xff…

9.1 Go 接口的定义

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于日间-日内不确定集的中长期电源扩展规划》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

输入偏置电流是什么?

输入失调电流与输入补偿电流概念一样&#xff08;input offset current&#xff09;&#xff1a;同相减去反相输入端偏置电流的差值。这是由生产工艺导致同相与反相端的电流大小方向都会有所不同。 第一种情况&#xff1a;同相输入端减去反相输入端 第一种情况&#xff1a;同相…

使用cv2控制鼠标实现circle的拖拽

2.代码 import numpy as np import cv2x_center [100,200,300,400] y_center [200,200,200,200] radius 30def mouse_LButtonDown(event, x, y, flags, param):global tempif event cv2.EVENT_LBUTTONDOWN:print(f" Down Clicked at ({x}, {y})")for i in range…

利用PowerQuery控制数据行数

PowerBI报表在开发的过程中&#xff0c;经常会遇到数据量非常庞大的情况&#xff0c;在这种情况下&#xff0c;本机连接数据源如果不进行特殊处理的话&#xff0c;那么刷新数据的时候可能会发生数据刷新时间过长、数据加载内存错误、开发过程中构建DAX卡顿等情况。 那么在实际开…

为下一波创新做准备:人工智能和元宇宙

人工智能和元宇宙的发展带来了独特的可能性和挑战。随着这些技术的发展&#xff0c;我们进入了一个沉浸式虚拟体验和智能系统的时代&#xff0c;我们正站在一个历史性的时刻。为迎接下一波创新&#xff0c;采取必要的措施是很重要的。 我们正在见证两项变革性技术的激动人心的发…

【MySQL】MySQL 图形化界面 - 使用说明(MySQL Workbench)

一、安装软件 Navicat&#xff0c;SQLyog 这些软件都不错&#xff0c;不过都需要收费&#xff0c;当然也有破解版。下面用 MySQL Workbench&#xff0c;它是官方提供的工具。 二、使用操作 这个软件本质是一个客户端&#xff0c;现在要让数据库能够远程登录。不过一般不会远程…

Ubuntu22.04之解决:无法关机和重启问题(二百四十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

专为Mac设计的窗口管理Magnet 中文

Magnet是一款专为Mac设计的窗口管理工具软件。它具备强大的多窗口管理能力&#xff0c;支持用户通过简单的拖放操作&#xff0c;将应用程序窗口快速对齐、排列和分组。此外&#xff0c;Magnet还提供了预设的布局选项和自定义设置功能&#xff0c;帮助用户实现个性化的窗口布局。…