vue实现省市区三级联动

方法一:el-select

<el-row :gutter="22">
                    <el-col :span="7">
                        <el-form-item label="省">
                            <el-select v-model="userForm.provinceId" placeholder="请选择" @change="queryProvinceDownCityList()">
                                <el-option v-for="(item,index) in provinceList" :label="item.cityname" :selected="item.id==userForm.provinceId" :value="item.id" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="市">
                            <el-select v-model="userForm.cityId" placeholder="请选择" @change="queryCityDownAreaList()">
                                <el-option v-for="(item,index) in cityList" :label="item.cityname" :selected="item.id==userForm.cityId" :value="item.id" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="区">
                            <el-select v-model="userForm.areaId" placeholder="请选择">
                                <el-option v-for="(item,index) in areaList" :label="item.cityname" :selected="item.id==userForm.areaId" :value="item.id" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

toRegister:function () {
                this.dialogFormVisible= true;
                var url = "/city/1";
                this.$http.get(url).then((resp)=>{
                    if(resp.data.code  == 20000){
                        console.log(resp.data.data);
                        this.provinceList = resp.data.data ;
                    }
                })
            },
            //加载省下面的所有的市的数据
            queryProvinceDownCityList:function(){
                this.cityList = [];
                this.areaList = [];
                var url = "/city/"+this.userForm.provinceId;
                this.$http.get(url).then((resp)=>{
                    if(resp.data.code  == 20000){
                        this.cityList = resp.data.data ;
                    }
                })
            },
            queryCityDownAreaList:function(){
                this.areaList = [];
                var url = "/city/"+this.userForm.cityId;
                this.$http.get(url).then((resp)=>{
                    if(resp.data.code  == 20000){
                        this.areaList = resp.data.data ;
                    }
                })
            },

方法二:安装插件

npm install element-china-area-data -S

代码实现

<template>
 
  <div id="app">
 
    <el-cascader
 
      size="large"
 
      :options="options"
 
      v-model="selectedOptions"
 
      @change="handleChange">
 
    </el-cascader>
 
  </div>
 
</template>
 
 
 
<script>
 
  import { regionData,CodeToText } from 'element-china-area-data'
 
  export default {
 
    data () {
 
      return {
 
        options: regionData,
 
        selectedOptions: []
 
      }
 
    },
 
 
 
    methods: {
 
      handleChange (value) {
 
        let data =CodeToText[value[0]]+", "+CodeToText[value[1]]+", "+CodeToText[value[2]];
        console.log(data)
 
      }
 
    }
 
  }
 
</script>