el表单的简单查询方法
预期效果
实现表单页面根据groupid 、type 、errortype进行数据过滤
实现
第一步,在页面中添加输入或者是下拉框,并且用相应的v-model进行绑定
<div style="display: flex;flex-direction: row;"><el-input style="width: auto;height:32px" placeholder="输入故障设备组" v-model="groupid"></el-input><el-form-item><el-select v-model="type" placeholder="请选择故障类型"><el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item><el-select v-model="errortype" placeholder="请选择故障原因"><el-option v-for="(item, index) in errtypeOptions" :key="index" :label="item.label":value="item.value"></el-option></el-select></el-form-item></div>
第二步,添加查询按钮 按钮绑定查询方法
<el-button type="primary" @click="search" style="margin-left: 5px">查询数据</el-button>
第三步
此时已经很多报错了,赶紧定义所需的数据和方法!
定义v-model绑定的数据,存储查询的东西
const groupid = ref("")
const type = ref("")
const errortype = ref("")
定义下拉框内容
let typeOptions = ref([{label: "一般故障",value: "一般故障"},{label: "紧急故障",value: "紧急故障"},{label: "特大故障",value: "特大故障"}
]);
let errtypeOptions = ref([{label: "温度",value: "温度"},{label: "电流",value: "电流"},{label: "电压",value: "电压"}
]);
第三步
定义搜索方法
//查询数据
const search = () => {if (groupid.value != "") {tableData.value = tableData.value.filter(v => v.groupid == (groupid.value))console.log(1);}if (type.value != "") {tableData.value = tableData.value.filter(v => v.type.includes(type.value))console.log(2);}if (errortype.value != "") {tableData.value = tableData.value.filter(v => v.errortype.includes(errortype.value))console.log(3);}}
这里的if是去除掉如果用户未输入内容的时候也进行过滤的情况的,通过多次过滤,我们可以任意选择筛选的情况
相关文章:
el表单的简单查询方法
预期效果 实现表单页面根据groupid 、type 、errortype进行数据过滤 实现 第一步,在页面中添加输入或者是下拉框,并且用相应的v-model进行绑定 <div style"display: flex;flex-direction: row;"><el-input style"width: auto…...
【USRP】通信总的分支有哪些
概述 通信是一个广泛的领域,涵盖了许多不同的技术、应用和专业分支。以下是通信领域的一些主要分支: 有线通信:这涉及到利用物理媒介(如电缆、光纤)进行通信。 电信:包括电话、电报和传真服务。宽带&#…...
关于服务器网络代理解决方案(1024)
方法一、nginx代理 配置代理服务器 在能够访问外网的服务器上,安装和配置 Nginx。你可以使用包管理器来安装 Nginx,例如: csharpCopy codesudo apt-get install nginx # 对于基于 Debian/Ubuntu 的系统 sudo yum install nginx # 对于基于 C…...
Linux下 /etc/shadow内容详解
/etc/shadow 文件,用于存储 Linux 系统中用户的密码信息,又称为“影子文件”。 前面介绍了 /etc/passwd 文件,由于该文件允许所有用户读取,易导致用户密码泄露,因此 Linux 系统将用户的密码信息从 /etc/passwd 文件中…...
Go学习第二章——变量与数据类型
Go变量与数据类型 1 变量1.1 变量概念1.2 变量的使用步骤1.3 变量的注意事项1.4 ""的使用 2 数据类型介绍3 整数类型3.1 有符号整数类型3.2 无符号整数类型3.3 其他整数类型3.4 整型的使用细节 4 小数类型/浮点型4.1 浮点型的分类4.2 简单使用 5 字符类型5.1 字符类型…...
【剑指Offer】:循环有序列表的插入(涉及链表的知识)
给定循环单调非递减列表中的一个点,写一个函数向这个列表中插入一个新元素 insertVal ,使这个列表仍然是循环升序的 给定的可以是这个列表中任意一个顶点的指针,并不一定是这个列表中最小元素的指针 如果有多个满足条件的插入位置,…...
【Django 04】Django-DRF(ModelViewSet)
DRF是什么? ModelViewSet 是 Django REST framework 提供的一个视图集类,它封装了常见的模型操作方法。 模型类提供了默认的增删改查功能。 它继承自 GenericViewSet、ListModelMixin、RetrieveModelMixin、CreateModelMixin、UpdateModelMixin、Dest…...
ubuntu命令
一、 防火墙命令 1、安装防火墙 sudo sudo apt-get install ufw2、查看防火墙状态 sudo ufw status# 返回结果 # Status: inactive # 表示没有开启防火墙3、开启防火墙 sudo ufw enable# 返回结果 # Command may disrupt existing ssh connections. Proceed with operation…...
C++学习之强制类型转换
强制类型转换运算符 带着三个疑问阅读: 出现的背景是什么?何时使用?如何使用? MSDN . 强制转换运算符 C中的四种强制类型转换符详解 static_cast (1) 使用场景 在基本数据类型之间转换,如把 int 转换为 char&#…...
在Linux中,可以使用以下命令来查看进程
在Linux中,可以使用以下命令来查看进程: ps 命令:显示当前用户的进程状态。 ps:显示当前终端会话中正在运行的进程。ps aux:显示系统中所有正在运行的进程,包括其他用户的进程。ps -ef:显示系统…...
【算法训练-动态规划 一】【应用DP问题】零钱兑换、爬楼梯、买卖股票的最佳时机I、打家劫舍
废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是【动态规划】,使用【数组】这个基本的数据结构来实现,这个高频题的站点是:CodeTop,筛选条件为&…...
2023年中职组“网络安全”赛项云南省竞赛任务书
2023年中职组“网络安全”赛项 云南省竞赛任务书 一、竞赛时间 总计:360分钟 竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A模块 A-1 登录安全加固 180分钟 200分 A-2 本地安全策略配置 A-3 流量完整性保护 A-4 事件监控 A-5 服务加固…...
Modeling Deep Learning Accelerator Enabled GPUs
Modeling Deep Learning Accelerator Enabled GPUs 发表在 ISPASS 2019 上。文章研究了 NVIDIA 的 Volta 和 Turing 架构中张量核的设计,并提出了 Volta 中张量核的架构模型。 基于 GPGPU-Sim 实现该模型,并且支持 CUTLASS 运行。发现其性能与硬件非常吻…...
《动手学深度学习 Pytorch版》 9.5 机器翻译与数据集
机器翻译(machine translation)指的是将序列从一种语言自动翻译成另一种语言,基于神经网络的方法通常被称为神经机器翻译(neural machine translation)。 import os import torch from d2l import torch as d2l9.5.1 …...
网络入门基础
网络入门基础 文章目录 网络入门基础网络的发展协议的概念网络协议初识协议分层层状结构OSI七层模型TCP/IP五层(或四层)模型TCP/IP模型和计算机软硬体系结构的关系 网络传输基本流程同局域网的两台主机通信不同局域网的两台主机通信 网络中的地址管理认识IP地址认识MAC地址 网络…...
Towards a Rigorous Evaluation of Time-series Anomaly Detection(论文翻译)
1 Introduction 随着工业4.0加速系统自动化,系统故障的后果可能会产生重大的社会影响(Baheti和Gill 2011; Lee 2008; Lee,Bagheri和Kao 2015)。为了防止这种故障,检测系统的异常状态比以往任何时候都更加重要ÿ…...
理解Python装饰器
本文将从多个方面对Python装饰器进行详细的阐述,并给出完整的代码示例。 一、装饰器的概念 装饰器是Python中非常重要的概念,它可以在不修改函数本身的情况下对函数的功能进行扩展或修改。装饰器本质上是一个函数,它接收一个函数作为参数&a…...
VR智慧景区,为游客开启智慧旅游新时代
近年来,文旅部加强了5G、VR虚拟技术等在文旅产业行业的运用,随着科技的不断发展,VR技术的运用越来越广泛,VR智慧景区作为一种全新的旅游方式,也渐渐的受到了人们广泛的关注,它可以让人们足不出户就欣赏到各…...
蓝桥杯 Java 青蛙过河
import java.util.Scanner; // 1:无需package // 2: 类名必须Main, 不可修改/**二分法从大(n)到小找足够小的步长前缀和记录每个位置的前面有的总石头数(一个石头表示可以容纳一个青蛙,一位置有多少个石头hi就是多少)&…...
雷达图应该如何去绘制?
雷达图(又称为蜘蛛网图、星形图)是一种用来显示多变量数据的图表,它可以直观地展示出数据在多个维度上的表现。雷达图中,每个轴代表一个维度,所有的轴都从中心点射出并均匀分布在圆周上,形成一个星形。每个…...
UE5蓝图实战:用JsonLibrary插件轻松搞定WebUI数据交互(附完整节点图)
UE5蓝图实战:用JsonLibrary插件轻松搞定WebUI数据交互 在虚幻引擎5的蓝图开发中,WebUI插件为开发者提供了强大的网页交互能力。然而,当涉及到前后端数据交换时,JSON格式的处理往往成为新手开发者的绊脚石。本文将带你深入探索Json…...
别再只搜字符串了!x64dbg逆向破解卡密软件的另一种思路:从API断点MessageBoxW开始
逆向工程实战:突破字符串搜索局限的API断点追踪法 在逆向分析领域,字符串搜索常被视为破解卡密验证的"第一板斧"。但当你面对一个精心设计的商业软件时,这招往往会失灵——字符串被混淆、关键提示信息被加密、甚至整个代码段都被加…...
CefFlashBrowser:Flash内容现代化解决方案与完整应用指南
CefFlashBrowser:Flash内容现代化解决方案与完整应用指南 【免费下载链接】CefFlashBrowser Flash浏览器 / Flash Browser 项目地址: https://gitcode.com/gh_mirrors/ce/CefFlashBrowser 当您珍藏的Flash教育课件无法打开,经典的Flash游戏无法运…...
GPCC数据不止看趋势:手把手教你用MATLAB做降水信号的谐波分析(附周年振幅相位代码)
GPCC数据不止看趋势:手把手教你用MATLAB做降水信号的谐波分析(附周年振幅相位代码) 长江流域的降水变化对农业生产、水资源管理和生态保护都具有重要意义。当我们拿到GPCC的月尺度降水数据时,除了绘制时间序列图观察趋势外&#x…...
掌控微信数据:从信息丢失到价值挖掘的完整解决方案
掌控微信数据:从信息丢失到价值挖掘的完整解决方案 【免费下载链接】WeChatMsg 提取微信聊天记录,将其导出成HTML、Word、CSV文档永久保存,对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatMs…...
别再只会用assign了!手把手教你用Verilog for循环实现4位乘法器(附Modelsim仿真对比)
从assign到for循环:Verilog乘法器的硬件思维进阶指南 在FPGA开发中,乘法器是最基础却又最容易被忽视的运算单元。许多初学者会直接使用assign out a*b;这样的简洁写法,却很少思考这行代码背后究竟生成了怎样的硬件电路。本文将带你从硬件思维…...
Mac Mouse Fix:突破macOS鼠标限制,重构专业级操作体验
Mac Mouse Fix:突破macOS鼠标限制,重构专业级操作体验 【免费下载链接】mac-mouse-fix Mac Mouse Fix - Make Your $10 Mouse Better Than an Apple Trackpad! 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix Mac Mouse Fix是一…...
保姆级教程:手把手教你用欧空局新版哥白尼系统下载Sentinel-2影像(含波段预览与无云影像合成)
零基础实战指南:新版哥白尼系统Sentinel-2影像全流程获取与处理 第一次接触欧空局的哥白尼数据下载系统时,面对琳琅满目的功能和专业术语,难免会感到无从下手。本文将带你一步步完成从注册到下载再到基础处理的全过程,特别针对Se…...
从NLP到CV:用PyTorch手把手实现ViT的Patch Embedding(附完整代码)
从NLP到CV:用PyTorch手把手实现ViT的Patch Embedding(附完整代码) 当自然语言处理领域的Transformer开始"跨界"重塑计算机视觉的版图时,最精妙的突破点往往藏在最基础的数据表示层。本文将带您亲历从Word Embedding到P…...
5 款主流开源 SDD 框架深度体验与 PK
强大的 AI Coding 似乎无时无刻不在制造新的焦虑:程序员、IDE、甚至软件工程都不再被需要,“会说话就会开发软件”。这是极端且不负责任的。毕竟,还有更多需要逻辑严密的商业软件系统。 强如 OpenAI,在使用Codex开发内部系统时依…...
