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]
}
}
}
}
发表回复