eta_front/src/components/addressPicker.vue

<template>
    <div class="form-group" :id="thisId">
		  <el-select v-model="selectedProvince" placeholder="请选择省" style="width:186px;marginRight:20px;" :disabled="disabled" @change="getCityList" clearable>
				<el-option>-- 省 --</el-option>
				<el-option
					v-for="item in ['河南省','河北省','山东省']"
					:key="item"
					:label="item"
					:value="item">
				</el-option>
			</el-select>
        <!-- <label>市</label> -->
		  <el-select v-model="selectedCity" placeholder="请选择市" style="width:186px;" :disabled="disabled" @change="getDistrictList" clearable>
				<el-option>-- 市 --</el-option>
				<el-option
					v-for="item in ['郑州市','天津市','青岛市']"
					:key="item"
					:label="item"
					:value="item">
				</el-option>
			</el-select>
        <!-- <label>区</label>
         <el-select v-model="selectedCity" placeholder="请选择市" style="width:186px;" :disabled="disabled" @change="getDistrictList">
				<el-option>-- 市 --</el-option>
				<el-option
					v-for="item in ['郑州市','天津市','青岛市']"
					:key="item"
					:label="item"
					:value="item">
				</el-option>
			</el-select>-->
    </div>
</template>

<script>
    export default {
        mounted () {
            // this.getProvinceList();
            if (this.init_province) {
                this.selectedProvince = this.init_province;
                this.getCityList(function(){
                    if (this.init_city) {
                        this.selectedCity = this.init_city;
                        this.getDistrictList(function(){
                            if (this.init_district) {
                                this.selectedDistrict = this.init_district;
                            }
                        });
                    }
                });
            }
        },
        props : ['id','init_province','init_city','init_district','disabled'],
        data () {
            return {
                provinceList : [],
                cityList : [],
                districtList : [],
                selectedProvince : '',
                selectedCity : '',
                selectedDistrict : ''
            }
        },
        computed: {
            thisId () {
                return this.id || 'select-region-wrap';
            }
        },
        watch : {
            selectedProvince : function (newVal) {
                this.$emit('update:init_province',newVal);
            },
            init_province : function (newVal) {
                this.selectedProvince = newVal;
            },
            selectedCity : function (newVal) {
                this.$emit('update:init_city',newVal);
            },
            init_city : function (newVal) {
                this.selectedCity = newVal;
            },
            selectedDistrict : function (newVal) {
                this.$emit('update:init_district',newVal);
            },
            init_district : function (newVal) {
                this.selectedDistrict = newVal;
            }
        },
        methods : {
            getProvinceList () {
               //  const this = this;
               //  $.ajax({
               //      url: host.api + 'region/list',
               //      type: 'get',
               //      dataType : 'json',
               //      xhrFields: {
               //          withCredentials: true
               //      },
               //      data: {
               //          parent_id:1,
               //          region_type : 1
               //      },
               //      success (res) {
               //          if (res.code == 0) {
               //              this.provinceList = res.data;
               //          }
               //      }   
               //  });
            },
            getCityList (callback) {
               //  const this = this;
               //  $.ajax({
               //      url: host.api + 'region/list',
               //      type: 'get',
               //      dataType : 'json',
               //      xhrFields: {
               //          withCredentials: true
               //      },
               //      data: {
               //          parent_id:this.selectedProvince,
               //          region_type : 2
               //      },
               //      success (res) {
               //          if (res.code == 0) {
               //              this.cityList = res.data;
               //              this.selectedCity = '';
               //              this.selectedDistrict = '';
               //              if (callback && typeof callback == 'function') {
               //                  callback();
               //              }
               //          }
               //      }   
               //  });
            },
            getDistrictList (callback) {
               //  $.ajax({
               //      url: host.api + 'region/list',
               //      type: 'get',
               //      dataType : 'json',
               //      data: {
               //          parent_id:this.selectedCity,
               //          region_type : 3
               //      },
               //      success (res) {
               //          if (res.code == 0) {
               //              this.districtList = res.data;
               //              this.selectedDistrict = '';
               //              if (callback && typeof callback == 'function') {
               //                  callback();
               //              }
               //          }
               //      }   
               //  });
            }
        }

    }
</script>

<style scoped>
label {
    width: 6em;
    text-align: right;
    margin-right: .5em;
    color: #606266;
    margin-left: -2em;
}
.form-control {
    width: 110px;
}
</style>