el-cascader 后端接口实现省市区联动

效果图：

核心代码（后期优化代码）

<el-cascader
          ref="cascaderMallCatergory"
          v-model="address"
          clearable
          placeholder="请选择省市区"
          :options="provinceList"
          :props="props"
          @active-item-change="handleItemChange"
          @change="handleMallCatergoryChange"
        ></el-cascader>

handleItemChange(val) {
      let map = new Map()
      map.set('北京市', '110000')
      map.set('天津市', '120000')
      map.set('重庆市', '500000')
      map.set('上海市', '310000')
      console.log(val)
      if (val.length === 1) {
        // 查询市区
        this.provinceList.map((item) => {
          if (item.value === val[0]) {
            // 四个直辖市特殊处理
            if( map.has(item.label)){
              return item.cities = [{value:item.label,label: item.label, cities:[]}]
            }
            getCityList({ provinceCode: val[0] }).then(res => {
              item.cities = res.data.map((e) => {
                return { value: e.code, label: e.name, cities: [] }
              })
            })
          }
        })
      } else if (val.length === 2) {
        //加载3级   查询该省市下县级数据
        this.provinceList.map((item) => {
          if (item.value === val[0]) {
            item.cities.map((value) => {
              // 天津市区
              if (value.value === val[1]) {
                if (map.has(value.label)) {
                  console.log('直辖市', value.label)
                  let code = map.get(value.label)
                  getDistrictList({ cityCode: code }).then(res => {
                    value.cities = res.data.map((e) => {
                      return {
                        value: e.code, label: e.name
                      }
                    })
                  })
                  return
                }

                getDistrictList({ cityCode: val[1] }).then(res => {
                  value.cities = res.data.map((e) => {
                    return {
                      value: e.code, label: e.name
                    }
                  })
                })
              }
            })
          }
        })
        console.log('=========', this.provinceList)
      }
    }



handleMallCatergoryChange() {
      if (this.address.length !== 0) {
        let arr = this.$refs['cascaderMallCatergory'].getCheckedNodes()[0].pathLabels
        console.log('mallCatergoryCode', this.address)
        console.log('arr', arr)
        // this.queryParams.installationName = arr.join('')
      }
    },