el-menu动态加载（el-cascader 动态加载+默认值）

刚解决了这个问题   
    
    
    
   ，趁热赶快拿出来凉凉


     


     


     


     

，明天早上起来估计会忘

下拉框的选择和默认值对于我来说一直都是个让人头疼的事 




 




 




 




，倒不是有多么难   

   

   

   

  ，而是很繁琐   
    
    
    
   。

要保证有值

     

     

     

     
，还要有显示的文字


     


     


     


     

。表单提交后
  




  




  




  




，再回过头编辑还要显示出来选择的项 




 




 




 




。

进入正题吧  


  


  


  


 ，我看别人写的文章也非常讨厌巴拉巴拉一堆没用的   

   

   

   

  。

首先el-cascader最常用的是显示省市区 
     
     
     
     ，所有省市区三四千项一下子加载出来总会有个卡顿的过程

   




   




   




   




，所以我一般用动态加载 



 



 



 



，这个element的文档和例子很清楚了

     

     

     

     
。

这是我代码中的一部分                      ，尽可能的去掉了多余的代码 <el-cascader ref="areas" v-model="address.area_ids" :options="options" :props="props" separator="/" /> data() { return { options: [], address: { area: [], area_ids: [], value: , lat: , lng: }, props: { lazy: true, //动态加载开关 lazyLoad(node, resolve) { //动态加载函数 const { level,value,label} = node; get("../city/get", { parentid: value }).then((res) => { if (res.state == success) { var data = res.data; data.map(item => { item.leaf = item.child == "0" //leaf如果是true就结束了


    




    




    




    



，意味着没有下一级 return item; }) resolve(data); } else { resolve([]); } }) } } } },

正常选择没问题
  




  




  




  




。一般刚开始的options默认的是第一级的数组

最头疼的部分



















，在编辑表单时要显示出来前面已经选择过的项                      ，也就是回显默认值


     



     



     



     


，首先保证v-mode的值是长度是3的数组（结合情况



















，不一定非要是3）   
    
    
    
   ，一定保证[省,市,区]顺序正确


     


     


     


     

，我昨天大意写错了市的id 




 




 




 




，检查了一天没发现问题  


  


  


  


 。

另外   

   

   

   

  ，既然要显示默认值

     

     

     

     
，肯定也要给el-cascader一个默认的options,要保证是这种结构 [ { value:1, label:河南, leaf:false,//不带leaf
  




  




  




  




，选项后面没有向右的箭头  


  


  


  


 ，下面的自行补充 children:[{ value:11, label:郑州, children:[ { value:111, label:中原区 }, { value:112, label:二七区 } ] },{ value:12, label:洛阳 }] }, { value:2, label:河北, } ]

应该很清晰了 
     
     
     
     ，就是保证所选路径的上下级和平级数据完整

   




   




   




   




，为什么要完整 



 



 



 



，因为还有下面一个问题 
     
     
     
     。

在options处理完后                      ，默认值应该就可以正常显示了

   




   




   




   




。

但是当再更换地区市


    




    




    




    



，选了一下“郑州    
    
    
    
”后发现



















，郑州的子级重复了（选“河南    


     


     


     


   ”也一样）                      ，这也好理解


     



     



     



     


，说明是郑州的子级又加载了一遍并且填充到下级的选项组里了



















，新加载的和默认的重复了 



 



 



 



。这毕竟不完美   
    
    
    
   ，做程序员慢慢有了强迫症了


     


     


     


     

，扒了扒element的源码 




 




 




 




，问题很好解决   

   

   

   

  ，只是element官方没有简单明了的说出来                      。

在处理完options和v-model后

     

     

     

     
，要处理选中项的加载状态
  




  




  




  




，否则还会重新加载一次


    




    




    




    



。 //上面的代码自行补充 this.$nextTick(_=>{ var node=this.$refs.areas.getCheckedNodes(); //获取当前选中节点 if(node&&node[0]&&node[0].pathNodes){//选中节点的所有父节点 for(var i=0;i<node[0].pathNodes.length;i++){ node[0].pathNodes[i].loaded=true; //节点的加载状态设为true  


  


  


  


 ，就不会再加载了 } } })

至此大功告成