el-cascader通过接口获取省市区

1、先引入el-cascader， @change监听你最后选择获取的内容， @expand-change监听你每次选择某一个层级

<el-cascader
    v-model="addressValue"
    style="width: 45%;"
    :options="addressOptions"
    @change="handleAddressChange"
    @expand-change="handleSonAddressChange"></el-cascader>

2、通过接口拿到数据，并且往addressOptions里面进行追加省市区

    getCountryList(){
      getCountryListApi().then(res=>{
        // console.log(res);
        if(res.code == 200){
          res.data.list.forEach(item => {
            this.addressOptions.push(
              {
                value: item.countryId,
                label: item.name,
                children: []
              }
            )
          })
          console.log(this.addressOptions);
        }
      }).catch(err=>{
        console.log('获取列表报错');
      })
    },
    handleSonAddressChange(e){
      if(e.length == 1){
        let params = {
          countryId: e[0]
        }
        getProvinceList(params).then(res=>{
          // console.log(res);
          if(res.code == 200){
            res.data.list.forEach(item => {
              this.addressOptions.forEach(item2 => {
                if(item2.value == e[0]){
                  item2.children.push(
                    {
                      value: item.provinceId,
                      label: item.name,
                      children: []
                    }
                  )
                }
              })
            })
          }
        })
      }else if(e.length == 2){
        let params = {
          provinceId: e[1]
        }
        getCityList(params).then(res=>{
          console.log(res);
          if(res.code == 200){
            this.addressOptions.forEach((item2) => {
              if(item2.value == e[0]){
                item2.children.forEach((item3) => {
                  if(item3.value == e[1]){
                    item3.children = []
                  }
                })
              }
            })


            res.data.list.forEach(item => {
              this.addressOptions.forEach((item2) => {
                if(item2.value == e[0]){
                  item2.children.forEach((item3) => {
                    if(item3.value == e[1]){
                      
                      item3.children.push(
                        {
                          value: item.cityId,
                          label: item.name,
                          children: []
                        }
                      )
                    }
                  })
                }
              })
            })
          }
        })
      }else if(e.length == 3){
        let params = {
          cityId: e[2]
        }
        getArea(params).then(res=>{
          // 获取之前将数组清空
          this.addressOptions.forEach((item2) => {
            if(item2.value == e[0]){
              item2.children.forEach((item3) => {
                if(item3.value == e[1]){
                  item3.children.forEach((item4) => {
                    item4.children = []
                  })
                }
              })
            }
          })
          // 获取下一层级内容，赋值给children
          res.data.list.forEach(item => {
              this.addressOptions.forEach((item2) => {
                if(item2.value == e[0]){
                  item2.children.forEach((item3) => {
                    if(item3.value == e[1]){
                      item3.children.forEach((item4) => {
                        item4.children.push({
                          value: item.areaId,
                          label: item.name
                        })
                      })
                    }
                  })
                }
              })
            })
        })
      }
    },