el-cascader联动中动态获取省市县

<template>
  <div>
      <el-cascader
						v-model="selectedOptions"
            change-on-select
            placeholder="请选择省市区"
			:options="options"
			@change="getData"
            :props="{
               value:'areacode',
              label:'name',
              children:'cities'
            }"
            >
						</el-cascader> 
  </div>
</template>


<script>
import api from '../store/api.js'
export default {
      data() {
        return {
          areacode: '',
          form:[{
            value:''
          }],
          
          departmentOptions: [],
          cascaderData: [],
          selectedOptions: [],

          options: [],
        }
      },
        mounted() {
    this.getData();
  },
  
  methods:{
     getNodes(val){
      let idArea
      let sizeArea
      let areaname
      if(!val){
        idArea=null
        sizeArea=0
        areaname=null
     
      this.url=api.getSheng;
      this.$axios.post(this.url).then(res => {
          
           let ass=[
       { areacode:'130000',
         areaname:'北京'},
        { areacode:'01',
         areaname:'上海'}
      ]
       this.cascaderData= ass
      // console.log(' this.cascaderData',  res)
          this.options=this.cascaderData.map((value,i)=>{
            return {
              areacode:value.areacode,
              name:value.areaname,
              cities:[]
            }
          })
      })
      }else if(val.length===1){
        idArea=val[0]
        sizeArea=val.length
        this.url=api.getShi;
       
            this.options.map((value,i)=>{              
              if(value.areacode===val[0]){
                console.log('idArea', idArea)
                let pages = new FormData();
                pages.append("areacode", idArea);
                this.$axios.post(this.url,pages).then(res => {
                  console.log('市', res)
                  console.log('tag',sizeArea )
                  let Items= [
                      { areacode:'130100',
                        areaname:'石家庄'},
                        { areacode:'01',
                        areaname:'北京2'}
                      ]
                  value.cities=Items.map((value,i)=>{
                    return {
                      areacode:value.areacode,
                      name:value.areaname,
                      cities:[]
                    }
                  })
                  })
              }
            })
        
      }else if(val.length===2){

        idArea =val[1]
        sizeArea=val.length
        console.log('sizeArea', sizeArea)
        this.options.map((value,i)=>{
          console.log('this.options', this.options)
            if(value.areacode===val[0]){
              console.log('tag', '1')
              value.cities.map((itec,i)=>{
                if(itec.areacode===val[1]){
                  console.log('tag', itec.cities.length)
                  
                    this.url=api.getXian;
                    let pagesd = new FormData();
                   pagesd.append("areacode", idArea);
                     this.$axios.post(this.url,pagesd).then(res =>{
                      console.log('ss', ss)
                         let Items= [
                      { areacode:"130102",
                        areaname:'北京1'},
                        { areacode:"130103",
                        areaname:'北京2'}
                      ]
                      console.log('县', res)
                       if(Items){
                         itec.cities=Items.map((every,i)=>{
                           return{
                             areacode:every.areacode,
                             name:every.areaname,
                           }
                         })
                       }
                     })
                  
                }
              })
            }
        })
      }
    },
   
      getData(val){
           this.getNodes(val)
           
     },
      
  }
}
</script>

<style>

</style>