子组件:
<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(