vue elemengUI 省市区三级联动

(1)template中

          
            
              
            
              
            
              
            
          

(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)

 

你可能感兴趣的:(vue)