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中

巴特西

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

最新文章

热门文章