el-cascader逐级获取省市区街道数据

el-cascader逐级获取数据

代码如下（示例）：

<el-cascader
                v-if="cascaderData.length > 0"
                v-model="form.shqAddress"
                placeholder="请选择省市区"
                :options="cascaderData"
                @active-item-change="handleItemChange"
                :props="{
                  value: 'id',
                  label: 'name',
                  children: 'cities',
                  checkStrictly: true,
                }"
                style="width: 100%"
                :key="cascaderKey"
              ></el-cascader>

```html
    handleItemChange(val) {
      this.getNodes(val)
    },

```html

```html
 getNodes(val) {
      let idArea
      let sizeArea
      if (!val) {
        idArea = null
        sizeArea = 0
        this.$http({
          url:("xxx"),
          method: "post",
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.cascaderData = data.data.map((value, i) => {
              return {
                id: value.provinceCode,
                name: value.provinceName,
                cities: []
              }
            })
          } else {
            this.$message.error(data.msg);
          }
        });
      } else if (val.length === 1) {
        idArea = val[0]
        sizeArea = val.length // 3:一级 4:二级 6:三级
        this.$http({
           url:("xxx"),
          method: "post",
          params: { provinceCode: idArea }
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {
                if (!value.cities.length) {
                  value.cities = data.data.map((value, i) => {
                    return {
                      id: value.cityCode,
                      name: value.cityName,
                      cities: []
                    }
                  })
                }
              }
            })
          } else {
            this.$message.error(data.msg);
          }
        })
      } else if (val.length === 2) {
        idArea = val[1]
        sizeArea = val.length // 3:一级 4:二级 6:三级
        this.$http({
           url:("xxx"),
          method: "post",
          params: { cityCode: idArea }
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {
                value.cities.map((value, i) => {
                  if (value.id === val[1]) {
                    if (!value.cities.length) {
                      value.cities = data.data.map((value, i) => {
                        return {
                          id: value.countyCode,
                          name: value.countyName,
                          cities: []
                        }
                      })
                    }
                  }
                })
              }
            })
          }
        })
      } else if (val.length === 3) {
        idArea = val[2]
        sizeArea = val.length // 3:一级 4:二级 6:三级
        this.$http({
           url:("xxx"),
          method: "post",
          params: { countyCode: idArea }
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {
                value.cities.map((value, i) => {
                  if (value.id === val[1]) {
                    value.cities.map((value, i) => {
                      if (value.id === val[2]) {
                        if (!value.cities.length) {
                          value.cities = data.data.map((value, i) => {
                            return {
                              id: value.townCode,
                              name: value.townName,
                            }
                          })
                        }
                      }
                    })
                  }
                })
              }
            })
          } else {
            this.$message.error(data.msg);
          }
        })
      }
    },