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

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"废物类型&#xff1a;"><el-select clearable v-model"queryForm.hswCateType" placeholder"请选择" change"industryCategoryChange" focus"industryCategoryFocus"><el-option v-for&…...

亲测influxdb安装为window后台服务

InfluxDB 安装 64bit&#xff1a;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&#xff0c;元素不重复。计数满足要求的二叉树&#xff08;每个非叶结点的值应等于它的两个子结点的值的乘积&#xff09;的数量。元素可以重复使用。 代码 自上而下动态规划。 所有元素大于1&#xff0c;所以不会有 自己自己自己 的…...

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 伪集群

哈喽大家好&#xff0c;我是咸鱼 今天这篇文章介绍如何在一台服务器&#xff08;以 CentOS 7.9 为例&#xff09;上通过 redis-trib.rb 工具搭建 Redis cluster &#xff08;三主三从&#xff09; redis-trib.rb 是一个基于 Ruby 编写的脚本&#xff0c;其功能涵盖了创建、管…...

ealtek高清晰音频管理器(realtek高清晰音频管理器怎么设置win10)

本文为大家介绍realtek高清晰音频管理器(realtek高清晰音频管理器怎么设置win10)&#xff0c;下面和小编一起看看详细内容吧。 我们都使用电脑来听音乐、看电影或者进行其他操作&#xff0c;但是如果我们觉得电脑产生的音效不够立体&#xff0c;我们就会想要去Realtek来设置音…...

微信小程序 scroll-view 组件的 bindscroll 不触发不生效

使用微信小程序基础组件中的scroll-view&#xff0c;但是滑动的时候 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导出路径不允许存在空文件&#xff0c…...

hyperf 十四 国际化

一 安装 composer require hyperf/translation:v2.2.33 二 配置 1、设置语言文件 文件结构&#xff1a; /storage/languages/en/messages.php /storage/languages/zh_CH/messages.php // storage/languages/en/messages.php return [welcome > Welcome to our applicat…...

C语言_初识C语言指针

文章目录 前言一、指针 ... 一个内存单元多大比较合适&#xff1f;二、地址或者编号如何产生&#xff1f;三、指针变量的大小 前言 内存是电脑上特别重要的存储器&#xff0c;计算机中程序的运行都是在内存中进行的。 所以为了有效的使用内存&#xff0c;就把内存划分成一个个…...

EMQX启用双向SSL/TLS安全连接以及java连接

作为基于现代密码学公钥算法的安全协议&#xff0c;TLS/SSL 能在计算机通讯网络上保证传输安全&#xff0c;EMQX 内置对 TLS/SSL 的支持&#xff0c;包括支持单/双向认证、X.509 证书、负载均衡 SSL 等多种安全认证。你可以为 EMQX 支持的所有协议启用 SSL/TLS&#xff0c;也可…...

4399面试总结C/C++游戏开发

主要流程 首先询问了C/C知识点 然后询问操作系统&#xff0c;计算机组成&#xff0c;数据结构&#xff0c;计算机网络哪两门熟悉 涉及的相关问题 多态的概念 tcp,udp&#xff1f; tcp,udp区别 tcp可靠&#xff0c;udp不可靠 tcp这个链接的过程? 一个TCP连接必须要经过三次“…...

hashlib 模块学习

hashlib 是 Python 标准库中用于散列和摘要算法的模块。散列算法将输入数据转换为固定长度的散列值&#xff08;也称为摘要&#xff09;&#xff0c;并且对于相同的输入始终生成相同的散列值。这对于存储密码、数字签名、数据完整性验证等领域非常有用。以下是对 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&#xff0c;返回 num1 和 num2 的乘积&#xff0c;它们的乘积也表示为字符串形式。 注意&#xff1a;不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例 1: 输入: num1 "2", num2 "3&…...

基于java Swing 和 mysql实现的飞机订票系统(源码+数据库+ppt+ER图+流程图+架构说明+论文+运行视频指导)

一、项目简介 本项目是一套基于java Swing 和 mysql实现的飞机订票系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过…...

Jmeter性能综合实战 —— 签到及批量签到

提取性能测试的三个方面&#xff1a;核心、高频、基础功能 签 到 请 求 步 骤 1、准备工作&#xff1a; 签到线程组n HTTP请求默认值n HTTP cookie 管理器n 首页访问请求n 登录请求n 查看结果树n 调试取样器l HTTP代理服务器 &#xff08;1&#xff09;创建线程组 &#xf…...

燃气管网监测系统,提升城市燃气安全防控能力

燃气是我们日常生活中不可或缺的能源&#xff0c;但其具有易燃易爆特性&#xff0c;燃气安全使用、泄漏监测尤为重要。当前全国燃气安全事故仍呈现多发频发态势&#xff0c;从公共安全的视角来看&#xff0c;燃气已成为城市安全的重大隐忧&#xff01;因此&#xff0c;建立一个…...

【SQL】1731. 每位经理的下属员工数量 ( 新思想:确定左表,依次添加后续字段)

leetcode题目链接 注意点 确定左表&#xff08;即&#xff0c;确定result表中的主键)&#xff0c;依次添加后续字段。注意&#xff1a;主键可能是一个字段&#xff0c;也可能是多个字段COUNT(DISTINCT())&#xff0c;一般为了防止重复&#xff0c;使用COUNT计数时&#xff0c…...

AMD Radeon RX 7000/6000系列显卡安装ROCm 调用CUDA

A卡用户画图炼丹、跑大模型甚至是跑机器学习、深度学习的有福了~ 注意&#xff1a;ROCm目前仅限在Linux系统下可用&#xff0c;Windows暂不支持 1. 安装ROCm RX6000系列及以下显卡使用ROCm 5.4.2稳定版本命令 【支持包括桌面级AMD Radeon RX6950XT、RX6900XT、RX6800XT、RX6…...

IndexTTS-2-LLM新手教程:从部署到生成,完整流程详解

IndexTTS-2-LLM新手教程&#xff1a;从部署到生成&#xff0c;完整流程详解 1. 快速了解IndexTTS-2-LLM IndexTTS-2-LLM是一款基于大语言模型的智能语音合成系统&#xff0c;能够将文字转换为自然流畅的语音。相比传统语音合成技术&#xff0c;它具有以下特点&#xff1a; 声…...

实时手机检测-通用:5分钟快速部署,小白也能轻松上手

实时手机检测-通用&#xff1a;5分钟快速部署&#xff0c;小白也能轻松上手 1. 模型简介 实时手机检测-通用是一款基于DAMOYOLO-S框架的高性能目标检测模型&#xff0c;专门用于在各种场景中快速准确地检测手机设备。这个模型在精度和速度上都超越了传统的YOLO系列方法&#…...

从设计稿到上架:一份给独立开发者的Android应用图标全流程制作指南

从设计稿到上架&#xff1a;独立开发者的Android应用图标全流程实战 在移动应用生态中&#xff0c;图标是用户对产品的第一印象。Google Play商店数据显示&#xff0c;专业设计的应用图标能提升40%以上的点击率。但对于独立开发者和小团队而言&#xff0c;如何在有限资源下打造…...

Ryzen系统管理单元调试:基于SMUDebugTool的高级硬件参数调优策略

Ryzen系统管理单元调试&#xff1a;基于SMUDebugTool的高级硬件参数调优策略 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: …...

neural-style-tf视频风格转换实战:让整个视频充满艺术气息

neural-style-tf视频风格转换实战&#xff1a;让整个视频充满艺术气息 【免费下载链接】neural-style-tf TensorFlow (Python API) implementation of Neural Style 项目地址: https://gitcode.com/gh_mirrors/ne/neural-style-tf neural-style-tf是一个基于TensorFlow实…...

福人板材靠谱供应商:企业采购决策核心要素解析

福人板材靠谱供应商&#xff1a;企业采购决策核心要素解析“选对福人板材靠谱供应商&#xff0c;比砍价更重要——企业采购决策的8个核心要素&#xff0c;少一个都可能踩坑”对于中小制造企业、装饰公司等采购方而言&#xff0c;福人板材作为行业知名的环保板材品牌&#xff0c…...

DownKyi:解决B站视频下载痛点的创新方案——从低效操作到高效管理的完整实践

DownKyi&#xff1a;解决B站视频下载痛点的创新方案——从低效操作到高效管理的完整实践 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频…...

用循环链表实现大整数加法:一个被遗忘的C语言经典数据结构实战

用循环链表实现大整数加法&#xff1a;一个被遗忘的C语言经典数据结构实战 在计算机科学教育中&#xff0c;数据结构与算法的学习往往陷入理论脱离实践的困境。而实现一个大整数加法计算器&#xff0c;恰好为循环链表这一经典数据结构提供了绝佳的应用场景。本文将带您深入探索…...

看完就会:2026年最强AI论文写作软件榜单,AI工具一键写高质论文

2026 年实测 10 款主流 AI 论文工具&#xff0c;千笔AI以全流程覆盖 语义级降重 免费查重领跑综合榜&#xff1b;ThouPen 稳坐留学生毕业全流程工具头把交椅&#xff1b;免费工具中DeepSeek Scholar、豆包学术版表现亮眼&#xff0c;30 分钟即可生成万字高质量初稿&#xff0…...

Web3j区块链开发实战:Java开发者的以太坊交互指南

Web3j区块链开发实战&#xff1a;Java开发者的以太坊交互指南 【免费下载链接】web3j Lightweight Java and Android library for integration with Ethereum clients 项目地址: https://gitcode.com/gh_mirrors/we/web3j 1. 核心价值解析&#xff1a;Web3j为何成为Java…...