iview级联菜单:行政区划的异步加载和选择校验

本例使用行政区划作为数据源，各级数据源长度如下，省级行政区划长度为 2，市级 4，县级 6，乡镇 9，村 12。如A省 66，B市 6601，C县 660102，D镇 660102001，E村 660102001005。

<Cascader :data="areaList" v-model="cascader" placeholder="请选择行政区划" 
          :load-data="loadData"	change-on-select @on-change="areaChange" 
          @on-visible-change="handleChangeOnSelect" clearable>
</Cascader>

1.设置数据源

在页面加载事件中初始化数据。utils.fetchJson是自己封装的异步方法，使用axios即可。

    async initArea() {
      //初始化省份
      let r2 = await utils.fetchJson('/api/area/queryList',{data:{nodeLevel:20}})
      this.areaList = r2.data
      }

2.数据异步加载

在级联标签中需设置load-data属性，在数据源中需设置loading: false属性，表示还有下一级数据。

async loadData (item, callback) {
	//setTimeout设置延时，显示加载动画，建议设置，不然数据返回时，页面会有明显抖动
  setTimeout(() => {        
    if(item.value.length<9){
      item.loading = true;
      utils.fetchJson('/api/area/queryList',{data:{pCode:item.id}}).then(
        r=>{
          let ArrayList = new Array()
          for(let i=0;i<r.data.length;i++){
            ArrayList.push({id:r.data[i].fullCode, value:r.data[i].codePath, 		
            label:r.data[i].title, loading: false, pid:r.data[i].pCode, children:[]})
          }
          item.children=ArrayList;
          item.loading = false;
          callback();
        })}
    else{ //行政区划长度大于9没有子集
      utils.fetchJson('/api/area/queryList',{data:{pCode:item.id}}).then(
        r=>{
          let ArrayList = new Array()
          for(let i=0;i<r.data.length;i++){
            ArrayList.push({id:r.data[i].fullCode, value:r.data[i].codePath, 			
            label:r.data[i].title, pid:r.data[i].pCode,children:[]})      
          }
          item.children=ArrayList;
          callback();
        })
    }
  }, 800);
},

3.限制用户选择更比自身级别更高的行政区划

注意需要设置change-on-select属性，选择即改变，该属性详情查看vue官网。

on-visible-change 事件展开和关闭弹窗时触发 显示状态，Boolean。

/**
 * 当级联选择器弹窗展开时，value为true
 * 当级联选择器弹窗关闭时，value为false
 */
handleChangeOnSelect (value) {
  if(!value){
    let areaCode = window.app.user.areaCode
    //当弹窗关闭时，校验用户的行政区划长度与其选择的行政区划长度，
    //如果选择的行政区划长度更短，说明用户选择了更高级别的行政区划
    if(areaCode && this.areaCode.length<areaCode.length){
      //为级联重新赋初始值
      this.queryMessage();
    }
  }
},

//行政区划回显 
queryMessage(){
  //获取用户行政区划，window.app.user.areaCode是用户登录时
  //存到session中的，请根据自己的系统自行获取
  let area = window.app.user.areaCode
  if(area){
    let val = []
    let province = area.substring(0,2);
    let city = area.substring(0,4);
    let county = area.substring(0,6);
    let village = area.substring(0,9);
    let street = area.substring(0,12);
    if(province){
      val.push(province)
    }
    if(city){
      val.push(city)
    }
    if(county){
      val.push(county)
    }
    if(village){
      val.push(village)
    }
    if(street){
      val.push(street)
    }
    this.areaChange(val)
    this.cascader = val
  }
},