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)",
      });
    },