vue、elementui控制前一级选择后,后一级才会有数据

<el-form-item label="废物类型:"><el-select clearable v-model="queryForm.hswCateType" placeholder="请选择" @change="industryCategoryChange" @focus="industryCategoryFocus"><el-option v-for="item in wasteTypeOptions" :key="item.hswCate" :label="item.hswCateName" :value="item.hswCate"></el-option></el-select>
</el-form-item>
<el-form-item label="废物代码:"><el-select clearable v-model="queryForm.hswCateCode" placeholder="请选择" popper-class="isIndustryBigCategory" class="industryBigCategoryClass" @change="industryBigCategoryChange" @focus="industryBigCategoryFocus"><el-option v-for="item in wasteCodeOptions" :key="item.hswCode" :label="item.hswCode" :value="item.hswCode"></el-option></el-select>
<div v-if="ifIndustryBigCategory" style="height: 0;margin-top: -8px;color: #f56c6c;">请选择废物类型</div>
</el-form-item>
queryForm:{},
ifIndustryBigCategory: false, //废物代码下方红字是否显示
// 废物类型wasteTypeOptions: [{hswCateName: "选项1",hswCate: "1",},{hswCateName: "选项2",hswCate: "2",},
],
// 废物代码
wasteCodeOptions: [],
created() {// 点击页面的任何一个地方,都隐藏提示document.addEventListener("click", this.hiddenStyle);},beforeDestroy: function () {document.removeEventListener("click", this.hiddenStyle);},
// 隐藏废物代码的焦点样式hiddenStyle() {this.ifIndustryBigCategory = false;$(".industryBigCategoryClass input").css({ "border-color": "" });},// 废物类别 - 值改变时industryCategoryChange(val) {if (this.queryForm.hswCateType) {// 选择了废物类别以后,请求接口出现废物代码的下拉数据// 给废物代码请求数据并赋值this.wasteCodeOptions = [{hswCode:'1',}];} else {this.queryForm.hswCateCode = "";}},// 废物类别 - input获得焦点时industryCategoryFocus() {this.hiddenStyle();},// 废物代码 - 值改变时industryBigCategoryChange(val) {},// 废物代码 - input获得焦点时industryBigCategoryFocus() {// 判断是否选择了废物类别,如果没有选择,则给出提示,并把选择框的颜色改变if (this.queryForm.hswCateType) {this.ifIndustryBigCategory = false;this.commonStyleReveal(".isIndustryBigCategory",".industryBigCategoryClass");} else {this.ifIndustryBigCategory = true;this.commonStyleHidden(".isIndustryBigCategory",".industryBigCategoryClass");}},// 公共的控制样式的函数 - 上一个级联的选择了以后,下一个下拉显示的控制commonStyleReveal(argument1, argument2) {// 显示下拉$(argument1).css({ opacity: 1 });$(argument1 + " .el-scrollbar").css({ display: "block" });$(argument1 + " .el-select-dropdown__empty").css({ display: "block" });// input框的颜色以及隐藏下方的文字$(argument2 + " input").css({ "border-color": "" });// 恢复右侧箭头的方向$(argument2 + " .el-select__caret.el-select__caret").css({transform: "",});},// 公共的控制样式的函数 - 上一个级联的未选择,下一个下拉隐藏的控制commonStyleHidden(argument1, argument2) {// 隐藏下拉$(argument1).css({ opacity: 0 });$(argument1 + " .el-scrollbar").css({ display: "none" });$(argument1 + " .el-select-dropdown__empty").css({ display: "none" });// input框的颜色$(argument2 + " input").css({ "border-color": "#f56c6c" });// 右侧箭头不改变方向$(argument2 + " .el-select__caret.el-select__caret").css({transform: "rotateZ(180deg)",});},
相关文章:
vue、elementui控制前一级选择后,后一级才会有数据
<el-form-item label"废物类型:"><el-select clearable v-model"queryForm.hswCateType" placeholder"请选择" change"industryCategoryChange" focus"industryCategoryFocus"><el-option v-for&…...
亲测influxdb安装为window后台服务
InfluxDB 安装 64bit:https://dl.influxdata.com/influxdb/releases/influxdb-1.7.4_windows_amd64.zip 解压安装包 修改配置文件 [meta]# Where the metadata/raft database is storeddir "D:/influxdb/meta"...[data]# The directory where the TSM…...
【LeetCode - 每日一题】823. 带因子的二叉树 (2023.08.29)
823. 带因子的二叉树 题意 元素都大于1,元素不重复。计数满足要求的二叉树(每个非叶结点的值应等于它的两个子结点的值的乘积)的数量。元素可以重复使用。 代码 自上而下动态规划。 所有元素大于1,所以不会有 自己自己自己 的…...
flutter 上传图片并裁剪
1.首先在pubspec.yaml文件中新增依赖pub.dev image_picker: ^0.8.75 image_cropper: ^4.0.1 2.在Android的AndroidManifest.xml文件里面添加权限 <activityandroid:name"com.yalantis.ucrop.UCropActivity"android:screenOrientation"portrait"andro…...
一台服务器上部署 Redis 伪集群
哈喽大家好,我是咸鱼 今天这篇文章介绍如何在一台服务器(以 CentOS 7.9 为例)上通过 redis-trib.rb 工具搭建 Redis cluster (三主三从) redis-trib.rb 是一个基于 Ruby 编写的脚本,其功能涵盖了创建、管…...
ealtek高清晰音频管理器(realtek高清晰音频管理器怎么设置win10)
本文为大家介绍realtek高清晰音频管理器(realtek高清晰音频管理器怎么设置win10),下面和小编一起看看详细内容吧。 我们都使用电脑来听音乐、看电影或者进行其他操作,但是如果我们觉得电脑产生的音效不够立体,我们就会想要去Realtek来设置音…...
微信小程序 scroll-view 组件的 bindscroll 不触发不生效
使用微信小程序基础组件中的scroll-view,但是滑动的时候 bindscroll 一直不生效。 <view class"container log-list"><scroll-view scroll-y style"height:100%;white-space:nowrap;" scroll-into-view"{{toView}}" enable…...
datax 删除分区数据,再写入MySQL脚本
#! /bin/bashDATAX_HOME/opt/module/datax#1、判断参数是否传入 if [ $# -lt 1 ] thenecho "必须传入all/表名..."exit fi #2、判断日期是否传入 [ "$2" ] && datestr$2 || datestr$(date -d -1 day %F)#DataX导出路径不允许存在空文件,…...
hyperf 十四 国际化
一 安装 composer require hyperf/translation:v2.2.33 二 配置 1、设置语言文件 文件结构: /storage/languages/en/messages.php /storage/languages/zh_CH/messages.php // storage/languages/en/messages.php return [welcome > Welcome to our applicat…...
C语言_初识C语言指针
文章目录 前言一、指针 ... 一个内存单元多大比较合适?二、地址或者编号如何产生?三、指针变量的大小 前言 内存是电脑上特别重要的存储器,计算机中程序的运行都是在内存中进行的。 所以为了有效的使用内存,就把内存划分成一个个…...
EMQX启用双向SSL/TLS安全连接以及java连接
作为基于现代密码学公钥算法的安全协议,TLS/SSL 能在计算机通讯网络上保证传输安全,EMQX 内置对 TLS/SSL 的支持,包括支持单/双向认证、X.509 证书、负载均衡 SSL 等多种安全认证。你可以为 EMQX 支持的所有协议启用 SSL/TLS,也可…...
4399面试总结C/C++游戏开发
主要流程 首先询问了C/C知识点 然后询问操作系统,计算机组成,数据结构,计算机网络哪两门熟悉 涉及的相关问题 多态的概念 tcp,udp? tcp,udp区别 tcp可靠,udp不可靠 tcp这个链接的过程? 一个TCP连接必须要经过三次“…...
hashlib 模块学习
hashlib 是 Python 标准库中用于散列和摘要算法的模块。散列算法将输入数据转换为固定长度的散列值(也称为摘要),并且对于相同的输入始终生成相同的散列值。这对于存储密码、数字签名、数据完整性验证等领域非常有用。以下是对 hashlib 模块的…...
大模型开发05:PDF 翻译工具开发实战
大模型开发实战05:PDF 翻译工具开发实战 PDF-Translator 机器翻译是最广泛和基础的 NLP 任务 PDF-Translator PDF 翻译器是一个使用 AI 大模型技术将英文 PDF 书籍翻译成中文的工具。这个工具使用了大型语言模型 (LLMs),如 ChatGLM 和 OpenAI 的 GPT-3 以及 GPT-3.5 Turbo 来…...
LeetCode 43题:字符串相乘
题目 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式。 注意:不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例 1: 输入: num1 "2", num2 "3&…...
基于java Swing 和 mysql实现的飞机订票系统(源码+数据库+ppt+ER图+流程图+架构说明+论文+运行视频指导)
一、项目简介 本项目是一套基于java Swing 和 mysql实现的飞机订票系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含:项目源码、项目文档、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过…...
Jmeter性能综合实战 —— 签到及批量签到
提取性能测试的三个方面:核心、高频、基础功能 签 到 请 求 步 骤 1、准备工作: 签到线程组n HTTP请求默认值n HTTP cookie 管理器n 首页访问请求n 登录请求n 查看结果树n 调试取样器l HTTP代理服务器 (1)创建线程组 …...
燃气管网监测系统,提升城市燃气安全防控能力
燃气是我们日常生活中不可或缺的能源,但其具有易燃易爆特性,燃气安全使用、泄漏监测尤为重要。当前全国燃气安全事故仍呈现多发频发态势,从公共安全的视角来看,燃气已成为城市安全的重大隐忧!因此,建立一个…...
【SQL】1731. 每位经理的下属员工数量 ( 新思想:确定左表,依次添加后续字段)
leetcode题目链接 注意点 确定左表(即,确定result表中的主键),依次添加后续字段。注意:主键可能是一个字段,也可能是多个字段COUNT(DISTINCT()),一般为了防止重复,使用COUNT计数时,…...
AMD Radeon RX 7000/6000系列显卡安装ROCm 调用CUDA
A卡用户画图炼丹、跑大模型甚至是跑机器学习、深度学习的有福了~ 注意:ROCm目前仅限在Linux系统下可用,Windows暂不支持 1. 安装ROCm RX6000系列及以下显卡使用ROCm 5.4.2稳定版本命令 【支持包括桌面级AMD Radeon RX6950XT、RX6900XT、RX6800XT、RX6…...
Windows进程注入技术深度解析:从DLL注入到反射式加载
1. 项目概述与核心价值在Windows安全研究、恶意软件分析乃至一些高级的软件开发场景中,“进程注入”是一个绕不开的核心技术点。简单来说,它指的是将一个代码模块(通常是DLL)或一段代码(Shellcode)加载到另…...
别再死记硬背了!用Python+DEAP库5分钟搞定NSGA-II多目标优化(附完整代码)
用PythonDEAP库5分钟实现NSGA-II多目标优化实战 当我们需要同时优化多个相互冲突的目标时,比如在机器学习中既要模型精度高又要推理速度快,传统单目标优化方法就捉襟见肘了。NSGA-II(非支配排序遗传算法II)作为多目标优化领域的标…...
uni-app视频播放二选一:手把手对比调试video.js与MuiPlayer插件(H5/m3u8实战)
uni-app视频播放方案深度对比:video.js与MuiPlayer在H5/m3u8场景下的实战抉择 当uni-app开发者面临H5端m3u8视频播放需求时,技术选型往往成为项目推进的第一道门槛。video.js与MuiPlayer作为两大主流解决方案,各自拥有独特的生态优势与适配特…...
OpenVAS部署避坑指南:从Kali的`apt-get install gvm`到官方OVA镜像,我踩过的那些雷
OpenVAS部署避坑指南:从Kali的apt-get install gvm到官方OVA镜像实战复盘 1. 为什么OpenVAS部署总让人头疼? 三年前我第一次接触漏洞扫描工具时,OpenVAS的安装过程就给我留下了深刻印象。当时按照某技术论坛的教程,在Kali Linux…...
SystemVerilog测试套件从IP到SoC的重用:架构设计与工程实践
1. 项目概述:从IP到SoC的验证鸿沟在芯片设计行业里摸爬滚打十几年,我见过太多团队在项目后期被验证工作拖得焦头烂额。一个典型的场景是:某个IP(知识产权核,比如一个USB控制器或一个DDR内存控制器)在独立验…...
外部系统调用SAP数据?用ABAP RFC函数搭个“桥梁”其实很简单(含Function Group创建避坑)
跨系统数据整合:ABAP RFC函数的设计哲学与实战指南 当企业数字化转型进入深水区,业务系统间的数据孤岛问题日益凸显。某零售企业的供应链总监最近就面临这样的挑战:"我们的电商平台需要实时获取SAP中的库存数据,但每次手工导…...
在Node.js后端服务中集成Taotoken实现多模型异步调用的教程
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 在Node.js后端服务中集成Taotoken实现多模型异步调用的教程 对于需要在后端服务中调用大语言模型的Node.js开发者而言,…...
Go语言内存优化:GC调优与内存池
Go语言内存优化:GC调优与内存池 1. GC调优 import "runtime/debug"func init() {debug.SetGCPercent(100) }2. sync.Pool var bufferPool sync.Pool{New: func() interface{} {return make([]byte, 4096)}, }func getBuffer() []byte {return bufferPool…...
HC7251晨芯阳科技内置MOS开关降压型LED恒流驱动器
HC7251是一款内置60V功率MOS 高效率、高精度的开关降压型大功率LED 恒流驱动芯片。HC7251采用固定关断时间的峰值电流控制方式,关断时间可通过外部电容进行调节,工作频率可根据用户要求而改变。HC7251通过调节外置的电流采样电阻,能控制高亮度…...
小米手机解锁BL保姆级教程:无需社区5级,用PHP脚本绕过HyperOS限制(附常见错误码解决)
小米手机解锁BL实战指南:突破HyperOS限制的完整方案 手里的小米13升级到HyperOS后,解锁Bootloader突然变得遥不可及?社区等级5和答题门槛让不少技术爱好者望而却步。本文将带你深入探索一种巧妙的技术方案,无需满足小米社区的苛刻…...
