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

javascript 复制代码
<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>
javascript 复制代码
queryForm:{},
ifIndustryBigCategory: false, //废物代码下方红字是否显示
// 废物类型
 wasteTypeOptions: [
        {
          hswCateName: "选项1",
          hswCate: "1",
        },
        {
          hswCateName: "选项2",
          hswCate: "2",
        },
],
// 废物代码
wasteCodeOptions: [],
javascript 复制代码
  created() {
    // 点击页面的任何一个地方,都隐藏提示
    document.addEventListener("click", this.hiddenStyle);
  },
  beforeDestroy: function () {
    document.removeEventListener("click", this.hiddenStyle);
  },
javascript 复制代码
    // 隐藏废物代码的焦点样式
    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)",
      });
    },
相关推荐
小周同学@32 分钟前
谈谈对this的理解
开发语言·前端·javascript
Wiktok35 分钟前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~39 分钟前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号41 分钟前
【大前端】前端生成二维码
前端·二维码
程序员码歌1 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康2 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏3 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码3 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js