el-cascader 级联选择器 配合 v-loading

el-cascader 不支持 v-loading 语法！

直接在级联选择器标签中使用 v-loading 不会生效

<el-cascader 
    v-loading = "yourFlag" // 不生效
    :options="options" 
    v-model="yourValue"
></el-cascader>

正确写法：

html:

    <el-cascader
      popper-class="loading"
      @visible-change="visibleChange"
      :options="options"
      v-model="value"
    ></el-cascader>
    <!-- popper-class 为自定义类名 也就是级联选择器的下拉框的类名  -->
    <!-- @visible-change 下拉框出现/隐藏时触发  -->

    

js:

 data() {
    return {
      cascaderLoading: null,//控制loading
      options: [],
      value: '',
    };
  },
methods:{
    visibleChange() {
      let options = {
        target: '.loading',//你自定义的类名
        lock: true,
        text: '拼命加载中...',
        // background: 'rgba(0, 0, 0, 0.7)',
      };
      this.$nextTick(() => {
        // 如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 $loading。
        //this.$loading 是Element的语法 将loading 样式放入指定的元素内
        // this.cascaderLoading = this.$loading(option)
        
        if (this.options.length == 0) {
          this.cascaderLoading = ElLoading.service(options);
          setTimeout(() => {
            this.cascaderLoading.close();
          }, 15000);// 设置遮罩层关闭时间 一般为接口超时时间
        }
      });
    },
    getOptions() {
      this.options = '你的数据';
      this.cascaderLoading.close();//关掉loading 遮罩层
    },
}

效果图：