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

element ui的select选择框

我们首先先试一下,这个东西怎么玩的

  <el-select v-model="select" @change="changeSelect"><el-option value="香蕉"></el-option><el-option value="菠萝"></el-option><el-option value="苹果"></el-option></el-select>data() {return {select: '',},methods: {changeSelect() {console.log(this.select);}}

这样就能用了,然后我们加一些属性

  <el-select v-model="select1" @change="changeSelects"><el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.card"></el-option></el-select>

我发现这个绑定的两个属性很关键,只要用好label和value这两个属性就可以实现一个效果,我们平时可能需要选择用户,然后获取它的身份证号,然后我们只需要让用户选择名字,这样在后台我们可以拿到他的身份证号!label是选项的标签,如果不写就是默认和value一样,如果写了就是现实label的值,然后value就是,返回的值,这样就可以实现这个效果了选择名字,拿到id

接着继续介绍两个属性叫multiple和filterable就是多选和可搜索,多选这个直接放入里面即可

       <el-select v-model="select1" @change="changeSelects" multiple><el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.card"></el-option></el-select>

着重说一下filterableel-select添加filterable属性即可启用搜索功能。默认情况下,Select 会找出所有label属性包含输入值的选项。也就是说,我们的data传入的数组里面是要有label属性的,这样就可以实现模糊查询操作

  <el-select v-model="select1" @change="changeSelects" filterable><el-option v-for="item in users" :key="item.id" :label="item.label" :value="item.card"></el-option></el-select>data() {return {users:[{label:'小刘',card:1234},{label:'小高',card:1235},{label:'小李',card:1236},{label:'小张',card:1237}]
}},

相关文章:

element ui的select选择框

我们首先先试一下&#xff0c;这个东西怎么玩的 <el-select v-model"select" change"changeSelect"><el-option value"香蕉"></el-option><el-option value"菠萝"></el-option><el-option value&quo…...

文档检索服务平台

文档检索服务平台是基于Elasticsearch的全文检索&#xff0c;包含数据采集、数据清洗、数据转换、数据检索等模块。 项目地址&#xff1a;Github、国内Gitee 演示地址&#xff1a;http://silianpan.cn/gdss/ 以下是演示角色和账号&#xff08;密码同账号&#xff09;&#xf…...

使用FastAPI进行可视化部署

文章目录 一、FastAPI介绍二、环境配置三、示例代码1.app.py代码如下2.websocket_handler.py 代码如下3.运行app4.遇到的问题与解决 一、FastAPI介绍 FastAPI是一个高性能的Python Web框架&#xff0c;它基于Starlette并利用了 Python类型提示的优势。它可以帮助我们快速构建具…...

设计模式 之 工厂模式(简单工厂模式、工厂方法模式、抽象工厂模式)(C++)

文章目录 C 工厂模式引言一、简单工厂模式概念实现步骤示例代码优缺点 二、工厂方法模式概念实现步骤示例代码优缺点 三、抽象工厂模式概念实现步骤示例代码优缺点 C 工厂模式 引言 在 C 编程中&#xff0c;对象的创建是一个常见且基础的操作。然而&#xff0c;当项目规模逐渐…...

3、Kubernetes 集群部署 Prometheus 和 Grafana

Kubernetes 集群部署 Prometheus 和 Grafana node-exporter 安装Prometheus 安装和配置Prometheus 配置热加载Grafana 安装部署Grafana 配置 实验环境 控制节点/master01 192.168.110.10 工作节点/node01 192.168.110.20 工作节点/node02 192.168.110.30 node-exporter 安装 #…...

【C语言】第八期——指针

目录 1 初始指针 2 获取变量的地址 3 定义指针变量、取地址、取值 3.1 定义指针变量 3.2 取地址、取值 4 对指针变量进行读写操作 5 指针变量作为函数参数 6 数组与指针 6.1 指针元素指向数组 6.2 指针加减运算&#xff08;了解&#xff09; 6.2.1 指针加减具体数字…...

如何在 Mac 上安装并配置 JDK 环境变量

如何在Mac上安装并配置JDK环境变量 在开发过程中&#xff0c;许多应用和框架都需要使用Java&#xff0c;尤其是使用Java开发的应用程序。如果你是Mac用户&#xff0c;以下是安装并配置JDK环境变量的步骤&#xff0c;确保你能顺利运行Java程序。 步骤 1&#xff1a;下载JDK 访…...

【git-hub项目:YOLOs-CPP】本地实现05:项目移植

ok&#xff0c;经过前3个博客&#xff0c;我们实现了项目的跑通。 但是&#xff0c;通常情况下&#xff0c;我们的项目都是需要在其他电脑上也跑通&#xff0c;才对。 然而&#xff0c;经过测试&#xff0c;目前出现了2 个bug。 项目一键下载【⬇️⬇️⬇️】&#xff1a; 精…...

LeetCode 热题 100 206. 反转链表

LeetCode 热题 100 | 206. 反转链表 大家好&#xff0c;今天我们来解决一道经典的算法题——反转链表。这道题在 LeetCode 上被标记为简单难度&#xff0c;要求我们将一个单链表反转&#xff0c;并返回反转后的链表。下面我将详细讲解解题思路&#xff0c;并附上 Python 代码实…...

2025年02月21日Github流行趋势

项目名称&#xff1a;source-sdk-2013 项目地址url&#xff1a;https://github.com/ValveSoftware/source-sdk-2013项目语言&#xff1a;C历史star数&#xff1a;7343今日star数&#xff1a;929项目维护者&#xff1a;JoeLudwig, jorgenpt, narendraumate, sortie, alanedwarde…...

WebXR教学 03 项目1 旋转彩色方块

一、项目结构 webgl-cube/ ├── index.html ├── main.js ├── package.json └── vite.config.js二、详细实现步骤 初始化项目 npm init -y npm install three vite --save-devindex.html <!DOCTYPE html> <html lang"en"> <head><…...

深入解析JVM垃圾回收机制

1 引言 本节常见面试题 如何判断对象是否死亡&#xff08;两种方法&#xff09;。简单的介绍一下强引用、软引用、弱引用、虚引用&#xff08;虚引用与软引用和弱引用的区别、使用软引用能带来的好处&#xff09;。如何判断一个常量是废弃常量如何判断一个类是无用的类垃圾收…...

【简单】209.长度最小的子数组

题目描述 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, …, numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回0。 示例 1&#xff1a; 输入&am…...

细说 Java 引用(强、软、弱、虚)和 GC 流程(二)

一、前文回顾 在 细说Java 引用&#xff08;强、软、弱、虚&#xff09;和 GC 流程&#xff08;一&#xff09; 我们对Java 引用有了总体的认识&#xff0c;本文将继续深入分析 Java 引用在 GC 时的一些细节。 还是从我们在前文中提到的引用流程图里说起&#xff0c;这里不清…...

CSS通过webkit-scrollbar设置滚动条样式

查看::-webkit-scrollbar-*各项关系 以下图为例&#xff0c;可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。 需要先给外部容器设置高度&#xff0c;再设置overflow: auto&#xff0c;最后设置三个webkit属性。 <!DOCTYPE html> <html lang"en">…...

Win10配置VSCode的C/C++编译环境

GNU&#xff08;编译器工具集合&#xff09;包含了g、gcc和gdb等编译器。MinGW&#xff08;Minimalist GNU for Windows&#xff09;是一个适用于Windows操作系统的最小化的GNU工具集&#xff0c;它包括了GCC编译器&#xff08;包括g&#xff09;以及其他一些必要的库和工具。M…...

数据结构与算法再探(七)查找-排序

查找 一、二分查找 二分查找是一种高效的查找算法&#xff0c;适用于在已排序的数组或列表中查找特定元素。它通过将搜索范围逐步减半来快速定位目标元素。理解二分查找的“不变量”和选择左开右闭区间的方式是掌握这个算法的关键。 二分查找关键点 不变量 在二分查找中&a…...

【C语言】指针(5)

前言&#xff1a;上篇文章的末尾我们使用了转移表来解决代码冗余的问题&#xff0c;那我们还有没有什么办法解决代码冗余呢&#xff1f;有的这就是接下来要说的回调函数。 往期文章: 指针1 指针2 指针3 指针4 文章目录 一&#xff0c;回调函数二&#xff0c;qsort实现快速排序1…...

大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(2)

Paimon的下载及安装&#xff0c;并且了解了主键表的引擎以及changelog-producer的含义参考&#xff1a; 大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(1) 利用Paimon表做lookup join&#xff0c;集成mysql cdc等参考&#xff1a; 大数据组件(四)快速入门实时数据…...

PLC通讯

PPI通讯 是西门子公司专为s7-200系列plc开发的通讯协议。内置于s7-200 CPU中。PPI协议物理上基于RS-485口&#xff0c;通过屏蔽双绞线就可以实现PPI通讯。PPI协议是一种主-从协议。主站设备发送要求到从站设备&#xff0c;从站设备响应&#xff0c;从站不能主动发出信息。主站…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...