关于vue.js:vueiview省市区三级联动

vue+iview 省市区三级联动

list.vue

<FormItem>

            区域
         <Select v-model="selected" v-if="provinceList" style="width: 130px" placeholder="请抉择省">
            <Option v-for="(item,index) in provinceList" :value="item" :key="item.code">{{item.name}}</Option >
        </Select>
        <Select v-model="citySelected" v-if="cityList" style="width: 130px" placeholder = "请抉择市">
            <Option v-for="(item,index) in cityList" :value="item" :key="item.code">{{item.name}}</Option >
        </Select>
        <Select v-model="areaSelected" v-if="areaList" style="width: 130px" placeholder ="请抉择区县">
            <Option  v-for="(item,index) in areaList" :value="item" :key="item.code">{{item.name}}</Option >
        </Select>
        </FormItem>

**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]
      }
    }
}
}