关于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]
      }
    }
}
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理