element-ui casader组件动态加载的回显问题

最近在做项目的时候用到了element-ui的cascader来做省市区的级联显示 我要做的需求就是在选择某个省的时候,再去加载省下面的所有市,在实现这个需求的过程中遇到了二级菜单不能反显的情况.以下是解决问题的方法,页欢迎各位大佬指正

首先简单介绍一下cascader的一些属性

value:对应省市的code值

label:对应省市的名字

leaf:是否是叶子节点,是叶子节点就不会继续加载下一面板,所以需要在请求市的时候添加

这里就是在请求第三个面板的时候,加了leaf:level>=2,当level>=2时为true,就说明这是最后一个cascader面板

  <el-cascader :props="props"></el-cascader>
<script>
  let id = 0;
  export default {
    data() {
      return {
        props: {
          lazy: true,  //是否动态加载子节点，需与 lazyLoad 方法结合使用
          lazyLoad (node, resolve) {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

组件在初始化的时候就会执行lazyLoad,先加载所有的面板,所以数据的初始化要全部都放在lazyLoad里面,以下是代码

<el-cascader
      :props = handleProps
      v-model='address'
      @change="handleChange"
      separator="-"
      ></el-cascader>

 handleProps:{  //应该写在data里面的,我直接给拿出来了,初始化和鼠标点击的时候都会执行
          lazy:true,
            lazyLoad:(node,resolve)=>{  //在没有遇到leaf:true的时候就会一直执行
                 var provinceData
                 var cityData
              if(!node.value){  // 初始化,没有点击省市的时候的赋值,数据的反显!!!
               this.address =  await this.$parent.handleArray() //从父组件传来的值
              }
              if(node.level==0){
              this.$http('getProvince', params, 'post').then(res=>{
              //只有在node.level为0的时候加载省数据,level是面板的排序,从0开始
                if(res.code=="0000"){  //还有params我是直接省略了,不影响大家阅读的哈
                provinceData =res.data.map(ele=>({
                    value:ele.code,
                    label:ele.name,
                    leaf:level>=1
                  }))
                   resolve(provinceData)
                }
              }).catch(err=>{
                console.log(err,"====>获取省");
              })
              }
              else if(node.level==1){
              this.$http('getDict', params, 'post').then(res=>{
                if(res.code=="0000"){
                cityData =res.data.map(ele=>({
                    value:ele.code,
                    label:ele.name,
                    leaf:level>=1  //叶子节点,不会有下一层级了
                  }))
                   resolve(cityData)
                   this.cityObj[value] = this.cityData  // 选择重复的选项,叶子节点不会再去请求,此时的cityData是一个[],因此可以将请求过的数据保存下来,
                }
              }).catch(err=>{
                console.log(err,'获取市');

              })
              }
           }
        }

但是这个方法只能是在初始化的时候,进行数据的返显,当我改变用户的时候,省市没有发生变化,lazyload只能执行一次,所以借鉴了网上的方法,使用v-if进行组件的销毁与重建,迫使lazyload执行一次,注意这里的赋值和组件的显示放再定时器或者nextTick中