vue +iview Select省市区联动

标签：city vue cityList area res id any Select iview

因为需要保存的表里只有City_id一个字段，所以这边只保存"区"的值

<Row type="flex" justify="start" class="code-row-bg" v-show="loginName=='admin'">
        <Col span="8">
          <FormItem label="省 :" style="width: 100%">
            <Select v-model="BaseAreaProvince"  style="width:150px" @on-change="selectProvince">
                <Option v-for="(Province,provinceIndex) in provinceList" :value="Province.id" :key="provinceIndex">{{ Province.area_name }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="市 :" style="width: 100%">
            <Select v-model="BaseAreaCity" style="width:150px"  @on-change="selectcity">
              <Option v-for="city in cityListShow" :value="city.id" :key="city.id">{{ city.area_name }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="区 :" style="width: 100%">
            <Select v-model="BaseArea" style="width:140px" @on-change="selectArea">
                <Option v-for="area in areaListShow" :value="area.id" :key="area.id">{{ area.area_name }}</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>

Js部分： 

BaseAreaProvince: string = '';

 BaseAreaCity: string = '';
  BaseArea: string = '';

city_id:any; 存储需要保存到表里的"区"的数据
provinceList:any=[]; 
cityList:any=[]; 
cityListShow:any=[];//显示在页面的List 
areaListShow:any=[];//显示在页面的List 
areaList:any=[]; 
visibleChange(value: boolean) {
 this.provinceList=[]; 
this.cityList=[];
 this.areaList=[]; 
this.getProvinces(); 
this.getCityList(); 
this.getAreaList(); } 
getProvinces(){
 this.$store.dispatch({ 
type: "basearea/getBaseArea", 
data:{area_level:1} })
.then((res)=>{
 this.provinceList= res.items;
 }); 
} 
getCityList(){
 this.$store.dispatch({ 
type: "basearea/getBaseArea", 
data:{area_level:2} })
.then((res)=>{
 this.cityList= res.items; 
}); 
} 
getAreaList(){
 this.$store.dispatch({ 
type: "basearea/getBaseArea",
 data:{area_level:3} })
.then((res)=>{ 
this.areaList= res.items; 
}); 
} 
//选择省 
 selectProvince(e){
 this.cityListShow= this.cityList.filter((item) => item.parent_id == e);
 this.BaseAreaCity = this.cityListShow[0].value; this.BaseArea=''; 
} 
//选择市 
 selectcity(e){ 
this.areaListShow= this.areaList.filter((item) => item.parent_id == e); 
if(this.areaListShow.length>0){ 
this.BaseArea = this.areaListShow[0].value; }
 } 
//选择区  selectArea(e){ 
this.city_id=e; 
}

save() {     (this.$refs.TechnicianForm as any).validate(async (valid: boolean) => {       if(this.city_id>0){         this.Technician.city_id=this.city_id; //Technician为模型类       }     });   }

如果有更优化的方案，烦请指导

 

标签：city,vue,cityList,area,res,id,any,Select,iview
From： https://www.cnblogs.com/QiangQiangDai/p/16714658.html