iView 联动动态加载，重组后台数据

iView联动组件当数据量大时一次性加载会导致页面卡顿，我遇到的数据大小是2M，一次性加载导致页面卡顿了10多秒，体验度及其差。优化时运用了联动动态加载数据，暂时给级联选择组件的对象属性children属性为空数组。

1、先重组后台数据，因为后台发过来的字段名称和iView要求的不相符。这里代码不太简洁，因为要添加列（column）这个属性，递归时无法实现按要求自增所以写死。

/* 四级联动 */
    getArea(e) {
      try{
        return e.map((t,index) => {
          let ob = this.createObj(t,index)
          ob.column =  0;
          ob.children =  t.List.map((h1,index1) => {
            let obj1 =this.createObj(h1,index1)
            obj1.column =  1;
            obj1.children =  h1.List.map((h2,index2) => {
              let obj2 =this.createObj(h2,index2)
              obj2.column =  2;
              obj2.children =  h2.List.map((h3,index3) => {
                let obj3 =this.createObj(h3,index3)
                obj3.column =  3;
                obj3.children =  h3.List.map((h4,index4) => {
                  let obj4 =this.createObj(h4,index4)
                  obj4.column =  4;
                  return obj4;
                });
                return obj3;
              });
              return obj2;
            });
             return obj1;
          });
          return ob
        });
      }catch(err){
        console.log('getAreaErr',err)
      }      
    }

2、提取相同代码，封装在方法减少代码量和增加阅读性。

createObj(obj,index) {//创建对象       
      let obj1 ={};
      obj1.value =  { Name: obj.NAME, Dam: obj.Dam };
      obj1.label =  obj.NAME;
      if(obj.List.length > 0){
        obj1.loading =  false;
      }
      obj1.index =  index;
      return obj1;      
    },

3、iView联动动态加载事件方法，这里运用一个判断加递归拿到下级联动的数据。
注意：递归函数调用自身时，前面也要有return，不然在下面getAddress方法里面获取到的将是一个undefined。

getChilren(address3,column2,areaIndex,start){//获取下级联动数据
      let curArea = address3;
      if(start != column2){        
       return this.getChilren(curArea[areaIndex[start]].children,column2,areaIndex,start+1)
      }else{
        return curArea[areaIndex[start]].children.map( mapItem => {
              mapItem.children = [];
              return mapItem
          })
      }
    },
    getAddress(item, callback) {//Iview动态联动加载方法，
        item.loading = true;
         let addIndex = this.addIndex;
         let address2 = JSON.parse(JSON.stringify(address))
        addIndex[item.column] = item.index;
        item.children = this.getChilren(address2,item.column,addIndex,0);
        item.loading = false;
        callback();
    }

关于iView联动动态加载用法这里不做说明，自己可去官网查看文档：https://www.iviewui.com/components/cascader#DTJZXX