vue elemengUI 省市区三级联动

（1）template中

<el-form-item label="公司注册地址"> <el-select v-model="ruleForm.province_id" style="width:150px;margin: 0px 10px 0 0;" @change="changeCity(1)"> <el-option v-for="(province,index) in provinceList" :key="index" :label="province.short_name" :value="province.area_id"></el-option> </el-select> 省 <el-select v-model="ruleForm.city_id" style="width:150px;margin: 0px 10px;" @change="changeCity(2)"> <el-option v-for="(city,index) in cityList" :key="index" :label="city.short_name" :value="city.area_id"></el-option> </el-select> 市 <el-select v-model="ruleForm.country_id" style="width:150px;margin: 0px 10px;"> <el-option v-for="(country,index) in countryList" :key="index" :label="country.short_name" :value="country.area_id"></el-option> </el-select> 区 <el-input v-model="ruleForm.address" style="width:240px;margin: 0px 10px;" placeholder="请输入详细地址"></el-input> </el-form-item>

（2）data中

ruleForm：{ province_id: '', city_id: '', country_id: '', address: '' }, // 省 provinceList: [], // 市 cityList: [], // 区县 countryList: []

（3）methods中

// 在获取编辑信息接口中： const sanObj = { sid: this.ruleFormData.province_id, shid: this.ruleFormData.city_id, cid: this.ruleFormData.country_id } // console.log(sanObj, 'sanObj') this.editShou(sanObj) this.ruleForm.address = this.ruleFormData.address // 地区选择 changeCity(type) { switch (type) { case 1: this.getCity(type, this.ruleForm.province_id) break case 2: this.getCity(type, this.ruleForm.city_id) break } }, // 获取地区列表 getCity(type, pid) { const data = { pid: pid } console.log(data, 'aaa') getCities(data) .then(res => { if (res.data && res.status === 200) { // console.log(res) switch (type) { case 0: this.provinceList = res.data this.ruleForm.city_id = '' this.ruleForm.country_id = '' this.cityList = [] this.countryList = [] break case 1: this.cityList = res.data this.ruleForm.city_id = '' this.ruleForm.country_id = '' this.countryList = [] break case 2: this.ruleForm.country_id = '' this.countryList = res.data break } } }) .catch(err => { console.log(err) }) }, getData(sid, callback) { const data = { pid: sid } getCities(data) .then(res => { if (res.data && res.status === 200) { // this.cityList = res.data callback(res) } }) .catch(err => { console.log(err) }) }, async editShou(sanObj) { const _this = this await _this.getData(100000, function(res) { _this.provinceList = res.data _this.ruleForm.province_id = sanObj.sid // setTimeout(() => { // }, 300) }) await _this.getData(sanObj.sid, function(res) { _this.cityList = res.data _this.ruleForm.city_id = sanObj.shid }) await _this.getData(sanObj.shid, function(res) { _this.countryList = res.data _this.ruleForm.country_id = sanObj.cid }) },

(4)created中

this.getCity(0, 100000)