crowd-test-service-frontend/src/components/commons/ProvinceCity.vue

<template>
  <div class="province-city">
    <el-form-item
      label-width="20%"
      class="page-form-item"
      label="省："
      prop="status"
      style="width: calc(20% - 20px)"
    >
      <el-select v-model="province" placeholder="请选择" @change="provinceChanged" :disabled="isModifyMode">
<!--        <el-option :key="''" :label="'全部'" :value="''"></el-option>-->
        <el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label-width="20%"
      class="page-form-item"
      label="市："
      prop="status"
      style="width: calc(30% - 20px);margin-right: 0px"
    >
      <el-select v-model="city" :loading="loadingCity" @change="cityChanged" placeholder="请选择" :disabled="isModifyMode">
        <el-option :key="''" :label="'请选择'" :value="''"></el-option>
        <el-option v-for="item in cities" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script type="text/javascript">
  import provinceCity from "@/constants/provinceCity.json";

  export default {
  name: "provinceCity",
  props: {
    provinceCode: {
      type: String,
      default: ""
    },
    cityCode: {
      type: String,
      default: ""
    },
    isModifyMode:{
      type:Boolean,
      default:false
    }
  },
  created() {
    this.provinces = provinceCity.provinces;
  },
  mounted() {
    this.$nextTick(()=>{
      this.province = this.provinceCode;
      this.provinceChanged(this.provinceCode);
      this.city = this.cityCode;
    })
  },
  data() {
    return {
      loadingCity: false,
      province: "",
      city: "",
      provinces: [],
      cities: []
    };
  },
  methods: {
    provinceChanged(value) {
      if (value !== "") {
        this.loadingCity = true;
        for (var item of this.provinces) {
          if (item.code === value) {
            this.cities = item.cities;
            this.city = "";
            this.loadingCity = false;
            break;
          } else {
            continue;
          }
        }
      } else {
        this.cities = [];
        this.city = "";
      }
      this.$emit("selectChange", this.province, this.city);
    },
    cityChanged(value) {
      this.$emit("selectChange", this.province, this.city);
    },
    resetProviceCity(province, city) {
      this.cities = [];
      if (province && city) {
        this.province = province;
        this.provinceChanged(this.province);
        this.city = city;
      } else {
        this.province = "";
        this.city = "";
      }
    }
  },
  watch:{
    data(){
      this.province = this.provinceCode
      this.city = this.cityCode
    },
    // provinceCode(val){
    //   console.log("pro code change in pro city com",val)
    //   this.provinceChanged(val)
    // },

  },
};
</script>

<style lang="scss" scoped>
.page-form-item {
  display: inline-block;
}
</style>