Element中的选择器组件Select (一级选择组件el-select)

简述:在 Element UI 中,ElSelect(或简称为 Select)是一个非常常用的选择器组件,它提供了丰富的功能来帮助用户从一组预定义的选项中选择一个或多个值。这里来简单记录一下


一. 组件和属性配置

<el-selectv-model="policeValue"placeholder="请选择"clearablemultiple @change="handleSelectChange"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option>
</el-select>clearable  清空图标multiple   选项多选v-model="policeValue"            绑定报警类型的值到`policeValue`数据属性上placeholder="请选择"              设置默认提示信息为"请选择"@change="handleSelectChange"     当选项发生变化时,触发`handleSelectChange`方法:key="item.value"                为每个选项分配唯一键,基于`item.value`:label="item.label"              显示的标签文本,来源于`item.label`:value="item.value"              选项的实际值,绑定到`item.value`

二. 定义参数

// loading状态
tableLoading: false,
// 报警类型的参数
policeValue: "",
// 报警类型的选项参数
options: [{value: 1,label: "错误报警",},{value: 2,label: "正确报警",},{value: 3,label: "重复报警",},
],

三. 默认事件

该事件选择时就会触发,写在el-select组件内部handleSelectChange(value) {this.tableLoading = true;// console.log("选中的值:", value);// 查找与选中值对应的选项对象,// 这里的value是数字,不是我们需要的label,所以需要处理const selectedItem = this.options.find((option) => option.value === value);// console.log(selectedItem);if (selectedItem.label) {// console.log("选中的标签:", selectedItem.label);// 在这里可以使用selectedItem.label进行进一步操作this.zhiAnParams.alarmType = selectedItem.label;  // 请求接口,获取数据zhianData(this.zhiAnParams, this.params).then((res) => {// console.log(res);if (res.code === 200) {this.tableLoading = false;const data = res.rows;this.tableData = data;this.total = res.total;}});}// 接下来,这里可以执行你需要的操作
},

四. 自定义事件

这点击按钮时触发该事件choseSearch() {//这里的this.selectedOptions是value数字,要想获取label需要处理数据const selectedOption = this.options.find((option) => option.value === this.policeValue);// console.log(selectedOption.label);// 这里拿到当前项// 重新赋值  const bypassParams = {dateTime:this.timeValue1 === "" ? "2024-06-13 17:34:16" : this.timeValue1, //管制时间level: selectedOption.label, //管制等级:一级、二级、三级};// console.log(bypassParams);},

五. 选择器更多配置

Element官网icon-default.png?t=N7T8https://element.eleme.cn/#/zh-CN/component/select

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

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

相关文章

Sylar服务器框架——ByteArray模块

1、模块概述 字节数组容器&#xff0c;提供基础类型的序列化与反序列化功能。ByteArray的底层存储是固定大小的块&#xff0c;以链表形式组织。每次写入数据时&#xff0c;将数据写入到链表最后一个块中&#xff0c;如果最后一个块不足以容纳数据&#xff0c;则分配一个新的块…

C#上位机开发详解

在工业控制和自动化领域&#xff0c;上位机软件的开发至关重要。它可以用来监控和控制下位机设备&#xff0c;进行数据采集和处理。本文将详细介绍如何使用C#开发一个上位机应用程序&#xff0c;涵盖环境设置、代码实现以及具体功能的实现。 一、开发环境设置 1. 安装Visual …

layui在表格中嵌入上传按钮,并修改上传进度条

当需要在表格中添加上传文件按钮&#xff0c;并不需要弹出填写表单的框的时候&#xff0c;需要在layui中&#xff0c;用按钮触发文件选择 有一点需要说明的是&#xff0c;layui定义table并不是在定义的标签中渲染&#xff0c;而是在紧接着的标签中渲染&#xff0c;所以要获取实…

Android 图像切换器:实现动态图像切换的关键技术与应用

在Android应用开发中&#xff0c;图像切换器是一种常见且实用的组件&#xff0c;用于实现图片的动态切换和展示。本文将探讨在Android平台上实现图像切换器的关键技术和应用场景&#xff0c;帮助开发者深入了解其原理与实现方法。 关键技术解析 图像切换器的实现依赖于几个核…

c++ 简单线程池

头文件 #pragma once #include <iostream> #include <vector> #include <queue> #include <thread> #include <mutex> #include <condition_variable> #include <functional> #include <future>class ThreadPool { public:Th…

【保姆级教学】Stable Diffusion提示词书写攻略!

前言 Stable Diffusion是一种深度学习模型&#xff0c;它能够根据提示词生成高质量的图像。在Stable Diffusion模型中&#xff0c;提示词起着至关重要的作用&#xff0c;因为它们为模型提供了关于所需输出的指导。本文将探讨Stable Diffusion关于提示词的原理&#xff0c;包括…

JAVA+SSM+VUE《教学视频点播系统》

1管理员登录 管理员登录&#xff0c;通过填写用户名、密码、角色等信息&#xff0c;输入完成后选择登录即可进入视频点播系统&#xff0c;如图1所示。 图1管理员登录界面图 2管理员功能实现 2.1 修改密码 管理员对修改密码进行填写原密码、新密码、确认密码并进行删除、修改…

MobileDiffusion:移动设备上亚秒级文本到图像生成

文本到图像扩散模型在生成高质量图像方面具有卓越的能力&#xff0c;这些模型是多种应用的基础&#xff0c;包括图像编辑、控制生成、个性化内容生成、视频合成和低级视觉任务等。然而&#xff0c;这些大规模模型通常需要在具有强大神经计算单元的服务器上运行&#xff0c;在移…

每天一个数据分析题(四百零六)- 因子分析

关于因子分析的KMO检验说法错误的是&#xff08; &#xff09;。 A. KMO统计量是取值在0和1之间 B. 当所有变量间的简单相关系数平方和远远大于偏相关系数平方和时&#xff0c;KMO值越接近于1 C. 当KMO值接近1时&#xff0c;表示各变量之间的偏相关系数应该很小 D. 当所有变…

MySQL 函数简介

MySQL 提供了丰富的函数&#xff0c;以下是一些常见的类型和示例&#xff1a; 数学函数&#xff1a; **1.ABS(x) &#xff1a;返回 x 的绝对值。 示例&#xff1a; select ABS(-89);**2. CEIL(x) &#xff1a;返回大于或等于 x 的最小整数。 示例&#xff1a; select CEIL(-…

get_metrology_object_result 得到计量模型的测量结果

get_metrology_object_result (Operator) 名称 get_metrology_object_result 得到计量模型的测量结果 签名 get_metrology_object_result( : : MetrologyHandle, Index, Instance, GenParamName, GenParamValue : Parameter) 描述 get_metrology_object_result允许访问由…

设备维护管理系统的主要内容有哪些

设备维护管理系统是一个综合的管理工具&#xff0c;旨在提高设备维修的效率和效果&#xff0c;优化资源利用&#xff0c;并确保设备的稳定运行。以下是设备维护管理系统的主要内容&#xff1a; 设备台账信息管理&#xff1a; 设备台账&#xff1a;记录设备的基本信息&#xff0…

【小沐学AI】Python实现语音识别(whisper+HuggingFace)

文章目录 1、简介1.1 whisper 2、HuggingFace2.1 安装transformers2.2 Pipeline 简介2.3 Tasks 简介2.3.1 sentiment-analysis2.3.2 zero-shot-classification2.3.3 text-generation2.3.4 fill-mask2.3.5 ner2.3.6 question-answering2.3.7 summarization2.3.8 translation 3、…

surfer做等值线图笔记

surfer等值线图及其白化 **grd文件的制作****白化的边界文件的制作****白化****绘图****逆转坐标轴** grd文件的制作 单击格网&#xff0c;选择x,y,z的数据&#xff0c;选择克里金插值方法&#xff0c;让后确定&#xff0c;保存grd文件 白化的边界文件的制作 surfer新建表&am…

J-Flash刷机的步骤

1、Keil编译代码&#xff0c;生成文件&#xff1a;E:\automotive\xxx.axf 2、打开"SEGGER J-Flash V7.88k"&#xff0c;配置Project information 3、点击菜单栏中的"File"&#xff0c;open data file&#xff0c;找到所需的xxx.axf文件 4、按快捷键F7进…

Ubuntu24.04(22.04+版本通用)Miniconda与Isaacgym

1. ubuntu24.04安装minicondda mkdir -p ~/miniconda3 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh解释下这段代码 bash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3~/miniconda3/miniconda.sh: 指向Mi…

前端笔记-day12

文章目录 01-视口02-宽度适配方案03-rem体验04-rem基本使用05-媒体查询06-rem适配07-rem布局08-less-体验09-less-注释10-less-运算11-less-嵌套12-less-变量13-less-导入14-less-导出15-less-禁止导出16-急速问诊&#xff08;不准确写法&#xff09;index.htmlindex.css 17-急…

mmdetection3增加12种注意力机制

在mmdetection/mmdet/models/layers/目录下增加attention_layers.py import torch.nn as nn from mmdet.registry import MODELS #自定义注意力机制算法 from .attention.CBAM import CBAMBlock as _CBAMBlock from .attention.BAM import BAMBlock as _BAMBlock from .attent…

C++的模板(十):shared_ptr的上锁问题

CSTL中的智能指针shared_ptr以前没用过&#xff0c;它是不是线程安全过去也没关注过。很多说它是不安全的&#xff0c;也有说是安全的。线程安全的问题&#xff0c;简单测试是测不出&#xff0c;到底怎么样&#xff0c;需要直接看代码。 从代码看&#xff0c;shared_ptr是个简…

使用表单系统快速搭建邀请和签到系统

在组织活动时&#xff0c;邀请和签到环节往往是活动成败的关键之一。传统的纸质邀请和签到方式不仅费时费力&#xff0c;还容易出现各种问题&#xff0c;例如名单遗漏、签到混乱等。而使用TDuckX“搭建邀请和签到系统”将彻底改变这一现状&#xff0c;为活动组织者提供了一种高…