Vue下拉框选择省份和城市

准备步骤

项目依赖element,因此要引入element

安装城市数据

npm install element-china-area-data -S

在所需的页面中引入四种实现全国各个省份相对应城市的联动选择

 <div class="aui-row">
              <div class="aui-col-xs-6">
                <el-form-item
                  label="省份"
                  prop="province"
                  :rules="[{ required: true, message: '请输入省份' }]"
                >
                
                  <el-select v-model="formData.province" clearable placeholder="请选择">
                    <el-option
                      v-for="item in optionsProvice"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                      @click.native="selectCity(item)"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="aui-col-xs-6">
                <el-form-item
                  label="城市"
                  prop="city"
                  :rules="[{ required: true, message: '请输入城市' }]"
                >
                
                   <el-select v-model="formData.city" clearable placeholder="请选择">
                    <el-option
                      v-for="item in optionsCity"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>

// import { provinceAndCityData, CodeToText } from 'element-china-area-data' // 1.省市不带‘全部’的二级联动
// import { provinceAndCityDataPlus, CodeToText } from 'element-china-area-data'// 2.省市带‘全部’的二级联动
// import { regionData, CodeToText } from 'element-china-area-data' // 3.省市区不带‘全部’三级联动选择
import { regionDataPlus, CodeToText } from 'element-china-area-data' // 4.省市区带‘全部’三级联动选择

  optionsProvice: Array<any> = provinceAndCityData;
  optionsCity:Array<any> =[]
  
    selectCity(Provice){ 
        // console.log(Provice)
        //  console.log(Provice.children)
        
        //如果切换省份城市那栏置为空
        Provice.children.forEach((item,index)=>{
           if(item!=this.formData.city){
            this.formData.city ="";
           }

        })
        this.optionsCity = Provice.children
       
  }
  
  

1.省市不带‘全部’的二级联动

2.省市带‘全部’的二级联动

3.省市区不带‘全部’三级联动选择效果

4.省市区带‘全部’三级联动选择效果图