城市选择

el-form-item label="主营项目：">
            <el-select v-model="filters.mainProject" placeholder="请选择" style=" 462px;">
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地址：">
            <el-select
              v-model="filters.provinceCode"
              style=" 22%"
              placeholder="请选择省"
              @change="handleProvince"
            >
              <el-option
                v-for="(item) in provinceList"
                :label="item.province_name"
                :value="item.province_id"
                :key="item.province_id"
              ></el-option>
            </el-select>
            <el-select
              v-model="filters.cityCode"
              style=" 22%"
              placeholder="请选择省"
              @change="handleCity"
            >
              <el-option
                v-for="(item) in cityList"
                :label="item.city_name"
                :value="item.city_id"
                :key="item.city_id"
              ></el-option>
            </el-select>
            <el-select
              v-model="filters.areaCode"
              style=" 180px"
              placeholder="请选择县区"
              @change="handleArea"
            >
              <el-option
                v-for="(item) in areaList"
                :label="item.area_name"
                :value="item.area_id"
                :key="item.area_id"
              ></el-option>
            </el-select>
          </el-form-item>

import city from "../../api/city";

data(){
　　return{

      areaList: [],

      cityList: [],

      provinceList: [],

      citys: [],

　　filters:{

 provinceCode: "",

        cityCode: "",

        areaCode: "",

        province: "",

        city: "",

        area: "",

}
}
}

    search(val) {

      this.citys = city.data;

      this.provinceList = this.citys;

    },

 

showlIst(id){

 API.showDetail(id).then((res) =>{

　　let data =  [　

            provinceCode: parseInt(res.data.provinceCode),

            cityCode: parseInt(res.data.cityCode),

            areaCode: parseInt(res.data.areaCode),

            area: res.data.area,

            city: res.data.city,

            province: res.data.province,

}

 　　　　　this.handleProvince(parseInt(data.provinceCode));

          this.handleCity(parseInt(data.cityCode));

          this.filters.areaCode = parseInt(data.areaCode);

         this.$nextTick(() => {

            this.filters = Object.assign({}, data);

          });

}

}

  handleProvince(val) {

      let cityIndex = this.citys.findIndex((item) => {

        return item.province_id == val;

      });

      this.cityList = this.citys[cityIndex].child;

      this.filters.province = this.provinceList[cityIndex].province_name;

    },

    handleCity(val) {

      let areaIndex = this.cityList.findIndex((item) => {

        return item.city_id == val;

      });

      this.areaList = this.cityList[areaIndex].child;

      this.filters.city = this.cityList[areaIndex].city_name;

    },

    handleArea(val) {

      let areaIndex = this.areaList.findIndex((item) => {

        return item.area_id == val;

      });

      this.filters.area = this.areaList[areaIndex].area_name;

    },

 

editSubmit() {

　　let params = {}

　　　　　(params.province = this.filters.province),

        (params.provinceCode = this.filters.provinceCode),

        (params.city = this.filters.city),

        (params.cityCode = this.filters.cityCode);

 

}

 链接: https://pan.baidu.com/s/1VuJd7U9VVTZkHXSGVL1hWw 提取码: 7vqf