当前位置: 首页 > 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)",});},
http://www.lryc.cn/news/145548.html

相关文章:

  • 亲测influxdb安装为window后台服务
  • 【LeetCode - 每日一题】823. 带因子的二叉树 (2023.08.29)
  • flutter 上传图片并裁剪
  • 一台服务器上部署 Redis 伪集群
  • ealtek高清晰音频管理器(realtek高清晰音频管理器怎么设置win10)
  • 微信小程序 scroll-view 组件的 bindscroll 不触发不生效
  • datax 删除分区数据,再写入MySQL脚本
  • hyperf 十四 国际化
  • C语言_初识C语言指针
  • EMQX启用双向SSL/TLS安全连接以及java连接
  • 4399面试总结C/C++游戏开发
  • hashlib 模块学习
  • 大模型开发05:PDF 翻译工具开发实战
  • LeetCode 43题:字符串相乘
  • 基于java Swing 和 mysql实现的飞机订票系统(源码+数据库+ppt+ER图+流程图+架构说明+论文+运行视频指导)
  • Jmeter性能综合实战 —— 签到及批量签到
  • 燃气管网监测系统,提升城市燃气安全防控能力
  • 【SQL】1731. 每位经理的下属员工数量 ( 新思想:确定左表,依次添加后续字段)
  • AMD Radeon RX 7000/6000系列显卡安装ROCm 调用CUDA
  • 钉钉小程序引用阿里巴巴图标
  • 深入了解Nginx:高性能的开源Web服务器与反向代理
  • vue3 自定义显示内容
  • 视频行为分析——视频图像转换与ffmpeg相关操作
  • Bean 生命周期
  • JavaScript原型链污染
  • 【Java】设计模式之单例模式与工厂模式
  • web自动化框架:selenium学习使用操作大全(Python版)
  • boringssl EVP_aes_128_ecb实现
  • vxe-table中树形结构
  • Linux命令查看CPU、内存、IO使用情况简单介绍