当前位置: 首页 > 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…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...