当前位置: 首页 > Web前端 > vue.js

vue-iview省城三级联动

时间:2023-03-31 23:55:55 vue.js

vue+iview三级联动list.vuearea{{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(constiinthis.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(constiinthis.areaList){if(this.areaList[i].co~~~~de==this.areaSelectedData&&this.areaList[i].parentId==this.citySelected.code){this.areaSelected=this.areaList[我]}}}},methods:{/*后台获取用户提交的省市信息*/getCity(addr){this.citySelectedData=addr.Citythis.areaSelectedData=addr.Countyfor(constiinthis.provinceList){if(Number(addr.Province)==this.provinceList[i].code){this.selectedData=this.provinceList[i].namethis.selected=this.provinceList[i]}}}}