今天在写代码的过程中，想要从Json文件中读取省、市、区的信息，再分别展示到下拉框中，所以想要分享一下自己写的过程和较好的实现方法。
1 思路一
json数据：
[
{
"zoneId": 459,
"code": "210000",
"parentId": "0",
"name": "辽宁省",
"children": [
{
"zoneId": 460,
"code": "210100",
"parentId": "210000",
"name": "沈阳市",
"children": [
{
"zoneId": 461,
"code": "210102",
"parentId": "210100",
"name": "和平区"
},
{
"zoneId": 462,
"code": "210103",
"parentId": "210100",
"name": "沈河区"
},
{
"zoneId": 463,
"code": "210104",
"parentId": "210100",
"name": "大东区"
},
{
"zoneId": 464,
"code": "210105",
"parentId": "210100",
"name": "皇姑区"
},
{
"zoneId": 465,
"code": "210106",
"parentId": "210100",
"name": "铁西区"
},
{
"zoneId": 466,
"code": "210111",
"parentId": "210100",
"name": "苏家屯区"
},
{
"zoneId": 467,
"code": "210112",
"parentId": "210100",
"name": "浑南区"
},
{
"zoneId": 468,
"code": "210113",
"parentId": "210100",
"name": "沈北新区"
},
{
"zoneId": 469,
"code": "210114",
"parentId": "210100",
"name": "于洪区"
},
{
"zoneId": 470,
"code": "210115",
"parentId": "210100",
"name": "辽中区"
},
{
"zoneId": 471,
"code": "210123",
"parentId": "210100",
"name": "康平县"
},
{
"zoneId": 472,
"code": "210124",
"parentId": "210100",
"name": "法库县"
},
{
"zoneId": 473,
"code": "210181",
"parentId": "210100",
"name": "新民市"
}
]
},
]读取json数据，使用require方法，在这就不多介绍这个方法了，将读取的数据赋给provinceOptions
一开始是只想在标签上面做文章，嵌套标签
<el-form-item label="所在市" prop="city">
<el-select v-model="form.city" filterable placeholder="请选择所在市" clearable
>
<el-option-group
v-for="item in provinceOptions"
:key="item.zoneId"
:label="item.name"
:value="item.name"
>
<el-option
v-for="item1 in item.children"
:key="item1.zoneId"
:label="item1.name"
:value="item1.name"
>
</el-option>
</el-option-group>
</el-select>
</el-form-item>缺点：但是发现这样的话，我只能嵌套两层，无法展示出区这一信息。还有一个需求就是我们需要实现联动的效果 ==> 就是当选择某一个省的时候，在对应的市的下拉框中可以实现这个省对应的所有市的信息，以供选择，以此类推区/县...
但是我想了一下，基于上述的思路，我可以加个if判断来实现联动。
<el-option-group
v-for="item in provinceOptions"
:key="item.zoneId"
:label="item.name"
:value="item.name"
>
<el-option
v-if="item.name == form.province"
v-for="item1 in item.children"
:key="item1.zoneId"
:label="item1.name"
:value="item1.name"
>
</el-option>
</el-option-group>但是最重要的问题还是没有解决，就是展示出区的信息，所以就有了思路二
2 思路二
就是可以给省、市的下拉框标签分别加上@change方法
<el-form-item label="所在省" prop="province">
<el-select v-model="form.province" filterable placeholder="请选择所在省" clearable
@change="handleProvinceChange">
<el-option
v-for="item in provinceOptions"
:key="item.zoneId"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所在市" prop="city">
<el-select v-model="form.city" filterable placeholder="请选择所在市" clearable
@change="handleCityChange">
<el-option
v-for="item in cityOptions"
:key="item.zoneId"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所在区/县" prop="district">
<el-select v-model="form.district" filterable placeholder="请选择所在区/县" clearable>
<el-option
v-for="item in districtOptions"
:key="item.zoneId"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>data() {
return {
districtOptions: [],
cityOptions: [],
provinceOptions: [],
}
},
methods: {
handleProvinceChange() {
let province
for (const item of this.provinceOptions) {
if(item.name === this.form.province) {
province = item
break
}
}
this.cityOptions = province ? province.children : []
// 触发这个方法时，需要将市和区清空，
this.form.city = ''
this.form.district = ''
},
handleCityChange() {
let city
for (const item1 of this.cityOptions) {
if(item1.name === this.form.city) {
city = item1
break
}
}
this.districtOptions = city ? city.children : []
this.form.collegeDistrict = ''
}
}上述内容，是自己的一些想法和思考的过程，希望能够对你有些帮助！
