In the process of writing code today, I want to read the province, city, and district information from the Json file and display it in the drop-down box respectively, so I want to share my writing process and better implementation method.
1 Idea 1
json data:
[
{
"zoneId": 459,
"code": "210000",
"parentId": "0",
"name": "Liaoning Province",
"children": [
{
"zoneId": 460,
"code": "210100",
"parentId": "210000",
"name": "Shenyang City",
"children": [
{
"zoneId": 461,
"code": "210102",
"parentId": "210100",
"name": "Peace District"
},
{
"zoneId": 462,
"code": "210103",
"parentId": "210100",
"name": "Shenhe District"
},
{
"zoneId": 463,
"code": "210104",
"parentId": "210100",
"name": "Dadong District"
},
{
"zoneId": 464,
"code": "210105",
"parentId": "210100",
"name": "Huanggu District"
},
{
"zoneId": 465,
"code": "210106",
"parentId": "210100",
"name": "Tiexi District"
},
{
"zoneId": 466,
"code": "210111",
"parentId": "210100",
"name": "Sujiatun District"
},
{
"zoneId": 467,
"code": "210112",
"parentId": "210100",
"name": "Hunnan District"
},
{
"zoneId": 468,
"code": "210113",
"parentId": "210100",
"name": "Shenbei New District"
},
{
"zoneId": 469,
"code": "210114",
"parentId": "210100",
"name": "Yuhong District"
},
{
"zoneId": 470,
"code": "210115",
"parentId": "210100",
"name": "Liaozhong District"
},
{
"zoneId": 471,
"code": "210123",
"parentId": "210100",
"name": "Kangping County"
},
{
"zoneId": 472,
"code": "210124",
"parentId": "210100",
"name": "Faku County"
},
{
"zoneId": 473,
"code": "210181",
"parentId": "210100",
"name": "Xinmin City"
}
]
},
]
To read json data, use the require method. I won’t introduce this method in detail here. Assign the read data to provinceOptions
At first, I just wanted to make a fuss about tags and nest tags.
<el-form-item label="City" prop="city">
<el-select v-model="form.city" filterable placeholder="Please select your city" 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>
Disadvantages: But I found that in this case, I can only nest two levels and cannot display the information about the area. Another requirement is that we need to achieve the linkage effect ==> That is, when a province is selected, the information of all cities corresponding to this province can be realized in the drop-down box of the corresponding city for selection, and so on. /county…
But I thought about it, and based on the above ideas,I can add an if judgment to achieve linkage.
<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>
But the most important problem is still unresolved, which is to display the information of the exit zone, so we came up with the second idea
2 Idea 2
That is, you can add the @change method to the drop-down box labels of provinces and cities respectively.
<el-form-item label="Province" prop="province">
<el-select v-model="form.province" filterable placeholder="Please select your province" 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="City" prop="city">
<el-select v-model="form.city" filterable placeholder="Please select your city" 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="District/County" prop="district">
<el-select v-model="form.district" filterable placeholder="Please select your district/county" 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 : []
//When triggering this method, the city and district need to be cleared.
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 = ''
}
}
The above content is some of my own thoughts and thinking process. I hope it can be of some help to you!
