elementui和vue的关系，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-optionv-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部分

				//这里是删除的时候清空所选中的Idshengdel() {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)}})},

elementui和vue的关系、第二种写法

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

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