【vue 四级联动】

  <a-form-model :model="searchform" layout="inline">
   <a-form-model-item label="省份">
            <a-select
              @change="provinceChange"
              placeholder="请选择"
              v-model="searchlist.code_prov"
              show-search
              optionFilterProp="children"
            >
              <a-select-option
                v-for="item in provinceList"
                :key="item.code_prov"
                :value="item.code_prov"
                :title="item.name_prov"
              >
                {{ item.name_prov }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="城市">
            <a-select
              @change="cityChange"
              placeholder="请选择"
              v-model="searchlist.code_city"
              show-search
              optionFilterProp="children"
            >
              <a-select-option
                v-for="item in cityList"
                :key="item.code_city"
                :value="item.code_city"
                :title="item.name_city"
              >
                {{ item.name_city }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="区县">
            <a-select
              @change="counChange"
              placeholder="请选择"
              v-model="searchlist.code_coun"
              show-search
              optionFilterProp="children"
            >
              <a-select-option
                v-for="item in countryList"
                :key="item.code_coun"
                :value="item.code_coun"
                :title="item.name_coun"
              >
                {{ item.name_coun }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="街道(乡镇)">
            <a-select
              placeholder="请选择"
              v-model="searchlist.code_town"
              show-search
              optionFilterProp="children"
            >
              <a-select-option
                v-for="item in townList"
                :key="item.code_town"
                :value="item.code_town"
                :title="item.name_town"
              >
                {{ item.name_town }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item>
            <a-button type="primary" @click="onSubmitsearch"> 查询 </a-button>
            <a-button style="margin-left: 10px" @click="onCancelsearch">
              重置
            </a-button>

           
          </a-form-model-item>
        </a-form-model>```

```javascript
export default {
  data() {
    return {
     searchlist: {
        code_prov: undefined,
        code_city: undefined,
        code_coun: undefined,
        code_town: undefined,
     },
    }
}

  methods: {
  // 获得 省份
    getprovince() {
      this.$http.post('/admin/nationArea/province').then((res) => {
        if (res.err_code == 0) {
          this.provinceList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 获得 城市
    getcity(val) {
      let params = {
        code_prov: val,
      }
      this.$http.post('/admin/nationArea/city', params).then((res) => {
        if (res.err_code == 0) {
          this.cityList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 获得 区县
    getcountry(val) {
      let params = {
        code_city: val,
      }
      this.$http.post('/admin/nationArea/country', params).then((res) => {
        if (res.err_code == 0) {
          this.countryList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 获得街道，乡镇
    gettown(val) {
      let params = {
        code_coun: val,
      }
      this.$http.post('/admin/nationArea/town', params).then((res) => {
        if (res.err_code == 0) {
          this.townList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },

    provinceChange(val) {
      this.searchlist.code_city = undefined
      this.searchlist.code_coun = undefined
      this.searchlist.code_town = undefined

      this.getcity(val)
    },

    cityChange(val) {
      this.searchlist.code_coun = undefined
      this.searchlist.code_town = undefined

      this.getcountry(val)
    },
    counChange(val) {
      this.searchlist.code_town = undefined

      this.gettown(val)
    },
  
  }

数据格式