vue+elementUI接口请求实现实现省市区三级联动

话不多说先上图
HTML部分

 <b-col md="6">
	                    <el-select v-model="provinceValue" clearable @clear="shengdel" placeholder="请选择省" @change="chooseProvince" @visible-change="chusheng" style="width:150px;">
		                    <el-option	
    		                    v-for="item in provinceData"
    		                    :key="item.code"
    		                    :label="item.name"
    		                    :value="item.name">
		                    </el-option>
	                    </el-select>
                    </b-col>
                    <b-col md="6">
	                    <el-select v-model="cityValue" clearable @clear="shidel" placeholder="请选择市" @change="chooseCity" @visible-change="chushi" style="width:150px;">
		                    <el-option	
    		                    v-for="item in cityData"
    		                    :key="item.code"
    		                    :label="item.name"
    		                    :value="item.name">
		                    </el-option>
	                    </el-select>
                    </b-col>
                    <b-col md="6">
	                    <el-select v-model="areaValue" clearable @clear="qudel" @change="chooseArea" placeholder="请选择区、县" @visible-change="chuxian" style="width:150px;">
    	                    <el-option
	                            v-for="item in areaData"
	                            :key="item.code"
	                            :label="item.name"
	                            :value="item.name">
	                        </el-option>
                        </el-select>
                    </b-col>

data部分

				//hb是对于本地的写法javaSc.json是下载的城市数据
				//如果是需要本地的城市数据https://static.panpay.com/static/nuxt/json/ChinaCity.json可以下载
				hb:'./js/javaSc.json',
                 provinceValue:'',
				cityValue:'',
				areaValue:'',
				provinceData:[],
				cityData:[],
				areaData:[],
				shengID: '',
                 shiID: '',
                 quID:'',

methods部分

				//这里是删除的时候清空所选中的Id
			 shengdel() {
                    console.log('删除省')
                    this.shengID = '';
                    this.shiID = '';
                    this.quID = '';
                },
                shidel() {
                    console.log('删除市')
                    this.shiID = '';
                    this.quID = '';
                },
                qudel() {
                    this.quID = '';
                    console.log('删除区')
                },
                 //下拉区请求区的数据
                 chuxian() {
                    var that = this;
                   axios.get('renzheng.ashx', {
                        params: {
                            action: 'GetAreaListBy',
                            type: 3,
                            pid:that.shiID,

                        }
                    })
                        .then(function (res) {
                            console.log(res)
                            that.areaData = res.data.data;

                        })
                        .catch(function (err) {
                            console.log(err)
                        });
                },
                //下拉区请求区的数据下拉市请求市的数据
                chushi() {
                    var that = this;
                   axios.get('renzheng.ashx', {
                        params: {
                            action: 'GetAreaListBy',
                            type: 2,
                            pid:that.shengID,

                        }
                    })
                        .then(function (res) {
                            console.log(res)
                            that.cityData = res.data.data;

                        })
                        .catch(function (err) {
                            console.log(err)
                        });
                },
			//点击选择省下拉时调取的接口
			//具体情况根据自己公司后台提供的需求，我这里是分三次请求，下拉省请求省的数据，下拉市请求市的数据
			//下拉区请求区的数据
                chusheng() {
                    var that = this;
                   axios.get('renzheng.ashx', {
                        params: {
                            action: 'GetAreaListBy',
                            type: 1,

                        }
                    })
                       .then(function (res) {
                            console.log(res)    
                            that.provinceData = res.data.data

                        })
                        .catch(function (err) {
                            console.log(err)
                        });
                },

                chooseProvince(value) {
                    var that = this;
				    that.cityValue = '';
				    that.areaValue = '';
				    that.cityData = [];
				    that.areaData = [];
				    that.provinceData.map(e=>{//遍历数据
					    if( value == e.name){
                            that.cityData = e.cityList;
                            //可输出e看看自己的数据字段名字是多少
                            console.log(e)
                            that.shengID = e.id;
						    return;
					    }
                    })
                    console.log(this.provinceValue)
			    },
                chooseCity(value) {
                    var that = this;
				    that.areaValue = '';
				    that.cityData.map(e=>{//遍历数据
					    if( value == e.name){
                            that.areaData = e.areaList;
                            console.log(e)
                            that.shiID = e.id;
						    return;
					    }
                    })
                    console.log(that.cityValue)
			    },
                chooseArea(value) {
                    var that = this;
                   that.areaData.map(e=>{//遍历数据
                       if (value == e.name) {
                           that.quID = e.id;
                            console.log(e)
					    }
                    })
			    },

第二种写法

就是刚进入页面就把全部城市的数据请求过来
也可以把数据下载到本地 然后请求本地的

created(){
			axios.get('http://47.99.104.19:8001/ChinaCity.json').then(res=>{
				this.provinceData = res.data;
			}).catch(e => {
				this.$message.error("网络连接超时");
		    })
		},