(js)vue项目根据省匹配市

(js)vue项目根据省匹配市

效果：

数据格式：

{
    "provinces": [
      {
        "name":"北京市",
        "level":"1",
        "code":"1100",
        "cities":[
          {
            "name":"北京市",
            "level":"1",
            "code":"1100"
          }
        ]
      }, 
      ...
      ...
	 {
        "name":"陕西省",
        "level":"1",
        "code":"6100",
        "cities":[
          {
            "name":"西安市",
            "level":"2",
            "code":"6101"
          },
          {
            "name":"铜川市",
            "level":"3",
            "code":"6102"
          },
          {
            "name":"宝鸡市",
            "level":"3",
            "code":"6103"
          },
          {
            "name":"咸阳市",
            "level":"3",
            "code":"6104"
          },
          {
            "name":"渭南市",
            "level":"3",
            "code":"6105"
          },
          {
            "name":"延安市",
            "level":"3",
            "code":"6106"
          },
          {
            "name":"汉中市",
            "level":"3",
            "code":"6107"
          },
          {
            "name":"榆林市",
            "level":"3",
            "code":"6108"
          },
          {
            "name":"安康市",
            "level":"3",
            "code":"6109"
          },
          {
            "name":"商洛市",
            "level":"3",
            "code":"6110"
          }
        ]
      },
   ]   
}      

组件：

<a-form-model-item label="省份" prop="province">
   <a-select v-model="tubeForm.province" placeholder="请选择" @change="provinceChanged">
     <a-select-option v-for="(item, index) in provinces" :key="index" :value="item.name">{{
       item.name
     }}</a-select-option>
   </a-select>
 </a-form-model-item>
 <a-form-model-item label="城市" prop="city">
   <a-select v-model="tubeForm.city" placeholder="请选择">
     <a-select-option v-for="(item, index) in chsh" :key="index" :value="item.name">{{
       item.name
     }}</a-select-option>
   </a-select>
 </a-form-model-item>
 
//1.引入数据源
import provinceCity from '@/assets/json/provinceCity.json'
//2.定义属性
data() {
	return: {
		provinces: [], //省
	     chsh: [], //市
	}
}
created() {
    this.provinces = provinceCity.provinces //页面创建完成先获取省
},
//3.逻辑处理
methods： {
	//省份选取事件
	provinceChanged(data) {
	  for (let a = 0; a < this.provinces.length; a++) {
	    if (data == this.provinces[a].name) {
	      this.chsh = this.provinces[a].cities
	    }
	  }
	},
}