vue-iview省市区三级联动

vue+iview省市区三级联动

list.vue

            区域
         
            {{ item.name }}
        
        
            {{ item.name }}
        
        
            {{ item.name }}
        
        

**javascript**
data() {
    return {

selected: '',

  citySelected: '',
  areaSelected: '',
  provinceList: [],
  cityList: [],
  areaList: [],
  selectedData: '',
  citySelectedData: '',
  areaSelectedData: '',
  provinceMsg:'',
  notice:{
    province:false
  }
}

},

mounted: function() {
   this.provinceList = [...province] 
},

watch: {
    selected: function () {
      // 清除区县
      this.citySelected = {}
      this.cityList = city.filter((item) => item.parentId == this.selected.code)
      for (const i in this.cityList) {
        if (this.cityList[i].code == this.citySelectedData && this.cityList[i].parentId == this.selected.code) {
          this.citySelected = this.cityList[i]
        }
      }
    },
    citySelected: function () {
      this.areaSelected = {}
      if (this.citySelected){
        this.areaList = area.filter((item) => item.parentId === this.citySelected.code)
      }
      for (const i in this.areaList) {
        if (this.areaList[i].co~~~~de == this.areaSelectedData && this.areaList[i].parentId == this.citySelected.code) {
          this.areaSelected = this.areaList[i]
        }
      }
    }
  },

 methods: {
   /*从后台获取用户提交的省市区信息*/
  getCity(addr) {
    this.citySelectedData = addr.City
    this.areaSelectedData = addr.County
    for (const i in this.provinceList) {
      if (Number(addr.Province) == this.provinceList[i].code) {
        this.selectedData = this.provinceList[i].name
        this.selected = this.provinceList[i]
      }
    }
}
}