element ui 地区选择器

效果：

image.png

源码：

<el-form-item label="地区:">
          <el-cascader
            v-model="addressForm.areaAll"
            :options="provinces"
            style="width: 500px"
          />
</el-form-item>
<el-button @click="submit">获取省市区</el-button>

<script>
import provinces from '@/assets/json/provinces'  // 文件地址：https://gitee.com/wx_01c754d920/provinces.git
export default {
  data() {
    return {
      provinces: provinces,
      addressForm: {
        areaAll: ''
      }
    }
  },
methods: {
  submit() {
    console.log(this.addressForm.areaAll)//选择后获取到的是一个数组，如：['浙江省','杭州市','上城区']
    const data = {
      provice : this.addressForm.areaAll[0],
      city: this.addressForm.areaAll[1],
      area: this.addressForm.areaAll[2]
    }
    console.log(data) //获取对象{provice:'浙江省', city:'杭州市', area:'上城区' }
  }
 }
}

省市区回显：(用于修改地址的需求)

<el-form-item label="地区:">
          <el-cascader
            v-model="addressForm.areaAll"
            :options="provinces"
            style="width: 500px"
          />
</el-form-item>
<el-button @click="submit">获取省市区</el-button>

<script>
import provinces from '@/assets/json/provinces' //简书无法上传文件，有需要的可私聊我
export default {
  data() {
    return {
      provinces: provinces,
      addressForm: {
        areaAll: ''
      },
      row:{provice:'浙江省', city:'杭州市', area:'上城区' }
    }
  },
  created(){
    const {provice, city, area } = this.row
    this.addressForm.areaAll= [provice, city, area]
  },
 }
}