vue3+elementUI实现省市级连(新)

子组件:

<template>
<div>
  <el-select
  ref="provinceSelect"
   v-model="chooseProvince"
   @change="choseProvince"
   class="province"
   placeholder="省">
   <el-option
    v-for="item in province"
    :key="item.id"
    :label="item.value"
    :value="item.id">
   </el-option>
  </el-select>
  <el-select
   ref="citySelect"
   v-model="chooseCity"
   @change="choseCity"
   placeholder="市">
   <el-option
    v-for="item in cities"
    :key="item.id"
    :label="item.value"
    :value="item.id">
   </el-option>
  </el-select>
  <el-select
   v-model="chooseCounty"
   @change="choseBlock"
   placeholder="区">
   <el-option
    v-for="item in counties"
    :key="item.id"
    :label="item.value"
    :value="item.id">
   </el-option>
  </el-select>
 </div>
</template>

<script>
import axios from 'axios'
export default {
    props: {
    selProvince: String,
    selCity: String,
    selCounty: String,
  },
 data () {
  return {
   mapJson:'../../public/mapData/map.json',
   province:'',
   cities: [],
   counties: [],
   city:'',
   block:'',
   //选择框选中的label值,因为此时value绑定的是id
   acProvince:'',
   acCity:'',
   acCouty:'',
   //把prop保存下来,进行修改赋值
   chooseProvince:this.selProvince,
   chooseCity:this.selCity,
   chooseCounty:this.selCounty,
  }
 },
 methods:{
  // 加载china地点数据,三级
   getCityData:function(){
    var that = this
    axios.get(this.mapJson).then(function(response){
     if (response.status==200) {
      var data = response.data
      that.province = []
      that.city = []
      that.block = []
      // 省市区数据分类
      for (var item in data) {
       if (item.match(/0000$/)) {//省
        that.province.push({id: item, value: data[item], children: []})
       } else if (item.match(/00$/)) {//市
        that.city.push({id: item, value: data[item], children: []})
       } else {//区
        that.block.push({id: item, value: data[item]})
       }
      }
      // 分类市级
      for (var index in that.province) {
       for (var index1 in that.city) {
        if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
         that.province[index].children.push(that.city[index1])
        }
       }
      }
      // 分类区级
      for(var item1 in that.city) {
       for(var item2 in that.block) {
        if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
         that.city[item1].children.push(that.block[item2])
        }
       }
      }
     }
     else{
      console.log(response.status)
     }
    }).catch(function(error){console.log(typeof+ error)})
   },
   // 选省
   choseProvince:function(e) {
    for (var index2 in this.province) {
     if (e === this.province[index2].id) {
    //    console.log(this.province[index2].id)//你选择的省级编码
    //   console.log(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值