当前位置: 首页 > news >正文

输入框过滤选项列表,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.dtcms.com/a/272780.html

相关文章:

  • JDK 1.7 vs JDK 1.8
  • 为什么域名加端口访问需要放行端口?
  • 【算法训练营Day11】二叉树part1
  • c语言初阶 指针
  • CH9121T电路及配置详解
  • 【算法笔记 day three】滑动窗口(其他类型)
  • Spring Security 技术原理与实战全景详解
  • 【OD机试题解法笔记】根据IP查找城市
  • 观众信息设置与统计(视频高级分析与统计功能)
  • 身份认证缺陷
  • Gulp实现功能及插件总结
  • java并发包下CountDownLatch、Semaphore用法
  • 【牛客刷题】活动安排
  • i.mx8 网络速率测试
  • Transformer:自注意力驱动的神经网络革命引擎
  • 网络综合实验
  • Linux中gdb使用
  • Spring- @Autowired和@Resource 的区别
  • 【网络】Linux 内核优化实战 - net.ipv4.tcp_keepalive_probes
  • linux系统---部署应用
  • day049-初识Ansible与常用模块
  • 如何远程访问在WSL运行的Jupyter Notebook
  • 如何安装python以及jupyter notebook
  • 创客匠人洞察:AI 时代创始人 IP 打造如何突破效率与价值的平衡
  • RabbitMQ 高级特性之消息分发
  • 【Fargo】发送一个rtp包的过程1:怎么统一加twcc序号
  • 华锐云空间展销编辑器:开启数字化展示新时代​
  • U-Boot 2025.07 引入的 “uthreads” 优势介绍
  • 什么是主链
  • 【会员专享数据】2013-2024年我国省市县三级逐月SO₂数值数据(Shp/Excel格式)