输入框过滤选项列表,el-checkbox-group单选

 需求:

根据输入的文本动态过滤选项列表,并在下方显示匹配到的选项。当用户勾选匹配到的选项时,把该选项的值赋值给输入框中绑定的值。

 当用户取消选择时,输入框中的字段可以随意编辑。

组件:el-input、el-checkbox-group、el-checkbox

<el-form-item label="测试一下"><el-inputv-model="selectedValue"placeholder="请输入内容"@input="onInputChange"></el-input><divv-if="filteredOptions.length > 0"style="border: 1px solid #e7eaec;padding: 10px;border-radius: 10px;background: #fff;"><el-checkbox-group v-model="checked" @change="onCheckboxChange"><div v-for="(item, index) in filteredOptions" :key="index"><el-checkbox :label="item.value">{{item.label}}</el-checkbox></div></el-checkbox-group></div>
</el-form-item>
options: [{ label: "选项一", value: "选项一" },{ label: "选项二", value: "选项二" },{ label: "选项三", value: "选项三" },
],
selectedValue:'',
filteredOptions: [],
checked: [],onInputChange(value) {if (value == "") {this.filteredOptions = [];this.checked = [];return;}this.filteredOptions = this.options.filter((item) => item.label.includes(value) || item.value.includes(value));if (this.filteredOptions.length === 0) {this.checked = [];}
},onCheckboxChange(value) {if (value.length > 1) {this.checked = [value[value.length - 1]];}if (this.checked.length > 0) {this.selectedValue = this.checked[0];}
},

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

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

相关文章

身份认证缺陷

Authentication Bypasses审计创建AccountVerificationHelper实例&#xff0c;用于处理账户验证逻辑parseSecQuestions函数的作用是从请求体中遍历参数名&#xff0c;找到包含secQuestion的参数&#xff0c;将其值存入Map中并返回这里直接把AccountVerificationHelper整个分析一…

火山引擎:字节跳动的技术赋能初解

火山引擎是字节跳动旗下的企业级智能技术服务平台&#xff0c;于2020年6月正式上线。它通过开放字节跳动在大数据、人工智能、视频云等领域的核心技术&#xff0c;助力企业实现数字化转型与业务增长。火山引擎界面核心能力与技术亮点:1.全栈云服务公有云与混合云&#xff1a;提…

VUE 带有搜索功能的穿梭框(简单demo)

一、template/ 组件代码<el-dialog :title"title" :visible.sync"dialogVisible" width"60%" :before-close"handleClose" class"custom-dialog-line" ><div style"text-align: center ; width: 100%; height…

写个扫雷小游戏

1.test.c&#xff08;测试源文件&#xff09;2.game.c&#xff08;游戏源文件&#xff09;3.头文件

【Linux庖丁解牛】— system V共享内存!

1. 什么是system VSystem V IPC&#xff08;Interprocess Communication&#xff0c;进程间通信&#xff09;是Unix系统中一种经典的进程间通信机制&#xff0c;由AT&T在System V.2版本中引入&#xff0c;并广泛应用于Linux等现代操作系统中。它通过三种核心机制实现进程间…

从输入到路径:AI赋能的地图语义解析与可视化探索之旅(2025空间智能全景)

​​摘要​​在空间智能爆发的2025年&#xff0c;地图系统已从静态导航工具进化为​​实时决策中枢​​。本文深度解析AI如何重构地理信息处理全链路&#xff1a;通过​​多模态语义理解​​&#xff08;文本/语音/图像→空间意图&#xff09;、​​动态路网建模​​&#xff0…

安全运维新趋势:AI 驱动的自动化威胁检测

在数字化浪潮中&#xff0c;网络攻击正从 “单点突破” 进化为 “链状打击”&#xff1a;2024 年某金融机构遭遇供应链攻击&#xff0c;恶意代码通过运维通道潜伏 3 个月&#xff0c;传统规则引擎因未识别 “正常运维指令中的异常参数”&#xff0c;导致数据泄露损失过亿。这背…

数据库复合索引设计:为什么等值查询列应该放在范围查询列前面?

前言作为后端开发工程师&#xff0c;我们经常会遇到数据库查询性能问题。在一次系统优化中&#xff0c;我发现一个简单的索引顺序调整竟然让查询速度提升了10倍&#xff01;这让我意识到复合索引列顺序的重要性。今天&#xff0c;我就来分享一下这个经验&#xff0c;希望能帮助…

【PMP备考】每日一练 - 2

1、一个建筑项目的项目经理发现&#xff0c;他管理的项目所在地附近正在新建一条新的水管线。公司政策要求&#xff0c;在他的团队继续完成这个项目之前&#xff0c;必须先填写一系列有关城市环境变化的表格。这是那两种情况的例子&#xff1f;&#xff08;选2个选项&#xff0…

【三】ObservableCollection 与 List 的区别

文章目录前言一、核心概念简介ObservableCollectionList二、关键差异对比三、典型使用场景ObservableCollection 的适用场景List 的适用场景四、在Community Toolkit MVVM中使用ObservableCollection<Data>和List<Data>场景1&#xff1a;动态列表&#xff08;Obser…

网安-SSRF-pikachu

目录 SSRF:Server-Side Request Forgery PHP curl PHP 可能引起SSRF的函数 PHP其他函数 CURL其他协议 SSRF利用&#xff1a; SSRF的发现 工具 SSRF的防御 pikachu-SSRF 一&#xff1a;curl 1.访问连接&#xff1a; 2.读取本地文件 3.dict协议扫描主机端口 二&…

在Centos系统上如何有效删除文件和目录的指令汇总

CentOS系统是一款开源的类Unix操作系统&#xff0c;极其亲和程序员和技术人员。这个系统最大的优势就是其高度自由化的特性&#xff0c;世界各地的开发者可以依照实际需求去修改和运行。在这个操作系统中&#xff0c;如果你想删除文件和目录&#xff0c;你可以使用各式各样的命…

Spring(四) 关于AOP的源码解析与思考

Spring&#xff08;四&#xff09; 关于AOP的源码解析与思考 每种语言都有其独特的机制和特点&#xff0c;那么说到Java你可能会首先想到反射&#xff0c;反射是Java语言提供的一种能够在程序运行时动态操作类或对象的能力&#xff0c;比如获取某个对象的类定义、获取类声明的属…

Android 15 Settings 搜索框:引入关键字过滤功能

在日常使用 Android 手机时,我们经常会用到“设置”应用中的搜索功能来快速定位所需选项。然而,有时搜索结果可能会包含一些我们不希望看到或者过于宽泛的条目。 本文将深入探讨这一变化,通过分析 SearchResultsAdapter.java 文件中的代码修改,揭示 Android 如何实现对特定…

Python-魔术方法-创建、初始化与销毁-hash-bool-可视化-运算符重载-容器和大小-可调用对象-上下文管理-反射-描述器-二分-学习笔记

序 欠4前年的一份笔记 &#xff0c;献给今后的自己。 魔术方法 特殊属性查看属性如果dir&#xff08;lobji&#xff09;参数obj包含方法 __dir__()&#xff0c;该方法将被调用。如果参数obj不包含__dir__()&#xff0c; 该方法将最大限度地收集参数信息。 dir()对于不同类型的对…

redis的一些疑问

spring集成redisCacheEvict(value "commonCache", key "#uniqueid_userInfo")什么时候会执行缓存移除呢&#xff1f;如果方法执行异常是否移除&#xff1f;如果缓存不存在还会移除么&#xff1f;这个移除会在redis的执行历史命令中监控到么&#xff1f;.…

3.检查函数 if (!CheckStart()) return 的妙用 C#例子

在桌面/WPF 开发中&#xff0c;我们经常需要在按钮事件里先判断“能不能做”&#xff0c;再决定“怎么做”。如果校验不过&#xff0c;就直接返回&#xff1b;校验通过&#xff0c;才继续执行业务逻辑。 今天分享一个极简写法&#xff1a;if (!CheckStart()) return;&#xff0…

炎热工厂救援:算法打造安全壁垒

高温天气下智慧工厂&#xff1a;算法赋能&#xff0c;安全救援无忧背景&#xff1a;极端高温下工厂的严峻挑战近年来&#xff0c;极端高温天气频发&#xff0c;部分地区气温接近甚至超过50℃。在这样酷热的环境中&#xff0c;工厂面临着诸多严峻问题。一方面&#xff0c;高温容…

pgsql模板是什么?

查找所有的数据库 select datname from pg_database运行该命令后&#xff0c;我们会发现其中出现了一些其它的数据库接下来&#xff0c;我们分析 template0 和 template1 的作用。template1 template1 是 PostgreSQL 默认用于创建新数据库的模板。当执行 CREATE DATABASE new_d…

LLM 不知道答案,但是知道去调用工具获取答案?

思考&#xff1a; LLM 自己“不知道”某个事实性问题的答案&#xff0c;但仍然能“知道”去调用工具获取正确答案&#xff0c;这听起来确实有点像个悖论该内容触及了大型语言模型&#xff08;LLM&#xff09;的核心局限性以及&#xff08;Agents&#xff09;的智能所在。实际上…