el-cascader组件实现动态加载省市县数据

el-cascader组件实现动态加载省市县数据的简单记录

需求简述：

项目中编辑页面有个籍贯的表单，点击时需要通过接口依次获取省、市、县的数据。elementUI中有现成的级联组件：el-cascader。

问题：

如何实现动态获取数据？

代码如下：

组件代码：

     <el-form-item label="籍贯" prop="a22">
            <el-cascader style="width: 100%" clearable
           v-model="cinaPLForm.a22"
           placeholder="请选择籍贯"
           :key="'a22'+flgNum"
           v-if="dataModel.a22Key == cinaPLForm.id+'a22'"
           :options="a22Options"
        :props="props"
           :show-all-levels="false"
           @expand-change="expandChangeA22">
       </el-cascader>
         </el-form-item>

其中v-model="cinaPLForm.a22"是绑定变量； :options="a22Options"是存储省市县数据的； :props="props"是对数据的对应处理；:show-all-levels="false" 我这里不需要显示全路径，只需要显示最后一级的名字即可；@expand-change="expandChangeA22" 实现点击后获取下一级别的数据。

 

js代码摘要如下：

<script>

export default {

data() {

return {

flgNum:0,

areaDicTypes:["DD_ZONE_PROVINCE","DD_ZONE_CITY","DD_ZONE_COUNTRY","DD_ZONE_TOWN"],
       a22Options: [],  // 籍贯

props: {
        value: 'id',
            label:'text'
       },
       //接口获取的编辑页面信息
       cinaPLForm:{

        a22: []

       }

}

}，

methods: {

init (item) {

this.cinaPLForm.a22 = [];  //先初始化为[],否则在a22有值并且再次打开同记录的该界面会报level为null的js错误

this.flgNum ++;

this.$nextTick(() => {
       //重置数据
       this.resetData();
//     //初始化省份数据
       let typeJson = {"uniqIde":this.areaDicTypes[0],"par":""};
       findDictsAndBack(typeJson,this,'proDataCallBack');
      })

},

resetData(){
      this.resetForm('cinaPLForm');
      this.a22Options = [];
     },

//重置查询条件
     resetForm (formName) {
         this.$refs[formName].resetFields();
     },
     //省级数据回调函数
     proDataCallBack(resProData,callData){
     resProData.map(item=>{
      this.$set(item,'children',[])
            })
     this.a22Options = resProData;
     this.hkdzOptions = resProData;
     this.xzzOptions = resProData;
     //获取信息
      this.getCinaPLForm();
     },
     //市级数据回调函数
     cityDataCallBack(resCityData,callData){
      let _this = this;
      let callCityData = callData.callData;
      let optionName = callData.opName;
     resCityData.map(item=>{
      this.$set(item,'children',[])
            })
     let tempProData = JSON.parse(JSON.stringify(_this[optionName]));
     let inxPro = tempProData.map((item) => item.id).indexOf(callCityData[0]);
     tempProData[inxPro].children = resCityData;
     _this[optionName] = tempProData;
     if(callCityData.length > 2){
      let typeJson = {"uniqIde":this.areaDicTypes[2],"par":callCityData[1]};
      let optionName = callData.opName;
      if(optionName == "a22Options"){
       findDictsAndBack(typeJson,this,'countyA22DataCallBack',callData);
      }else{
       findDictsAndBack(typeJson,this,'countyDataCallBack',callData);
      }
     }
     },
     //县级a22数据回调函数
     countyA22DataCallBack(resCountyData,callData){
      let _this = this;
      let callCountyData = callData.callData;
      let optionName = callData.opName;
      let tempData = JSON.parse(JSON.stringify(_this[optionName]));
     let inxPro = tempData.map((item) => item.id).indexOf(callCountyData[0]);
     let inxCity = tempData[inxPro].children.map((item) => item.id).indexOf(callCountyData[1]);
     tempData[inxPro].children[inxCity].children = resCountyData;
     _this[optionName] = tempData;
     },

//籍贯地区级联组件点击展示时触发事件
     expandChangeA22(v1){
      if(v1.length < 3){
       this.getAreasData(v1,"a22Options");
      }
     },

getAreasData(vArr,opName){
      let _this = this;
      let areaCode = "";
      let levelStr = 0;
      let par = "";
      if(vArr.length > 0){
       areaCode = vArr[vArr.length-1];
       par = areaCode;
       levelStr = vArr.length;
      }
      let uniqIde = _this.areaDicTypes[levelStr]; // DD_ZONE_PROVINCE DD_ZONE_CITY  DD_ZONE_COUNTRY DD_ZONE_TOWN
      let typeJson = {"uniqIde":uniqIde,"par":par};
      if(vArr.length == 1){
    findDictsAndBack(typeJson,this,'cityDataCallBack',{callData:vArr,opName:opName});
      }else if(vArr.length == 2){
    findDictsAndBack(typeJson,this,'countyDataCallBack',{callData:vArr,opName:opName});
      }else if(vArr.length = 3){
    findDictsAndBack(typeJson,this,'townDataCallBack',{callData:vArr,opName:opName});
      }
     },
     getCinaPLForm(){

//其中接口返回后，对a22数据的处理：

if(!(caseInfo.a22 == null || !caseInfo.a22)){
     let intA22ProCode = (caseInfo.a22.substr(0,2)+"0000000000");
     let intA22CityCode = (caseInfo.a22.substr(0,4)+"00000000");
     let tempA22Arr = [intA22ProCode,intA22CityCode,caseInfo.a22]
     _this.cinaPLForm.a22 = tempA22Arr;
     let typeJson = {"uniqIde":this.areaDicTypes[1],"par":intA22ProCode};
     findDictsAndBack(typeJson,this,'cityDataCallBack',{callData:tempA22Arr,opName:"a22Options"});
    }else{
     _this.cinaPLForm.a22 = [];
    }

}

}

:key+v-if+js代码中的初始化赋值a22为[]，可解决不同操作打开页面的level为null的bug。

}

</script>

附父页面打开本页面时的js代码摘要：

viewHandle (item,sourceType) {
    item.a22Key = item.id+"a22";
          this.$nextTick(() => {
            this.$refs.cinaPatientAndFlowView.init(item)
          })
      },