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)