我目前的省市区代码是这样的,只能通过手动输入,我想可以选择一个省之后,下面的市的选择范围是对应的,然后选择之后下方的区县也是对应这样,请问要怎么实现呢?我看好多代码都是一个框里显示省市区,我想保留三个框
<el-row>
<el-col :span="20">
<el-form-item label="省份" prop="province">
<el-input v-model="addForm.province"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="20">
<el-form-item label="城市" prop="city">
<el-input v-model="addForm.city"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="20">
<el-form-item label="区县" prop="county">
<el-input v-model="addForm.county"></el-input>
</el-form-item>
</el-col>
</el-row>
这是我有的province.json文件:
[
{
"name": "北京市",
"value": "110000"
},
{
"name": "天津市",
"value": "120000"
},
{
"name": "河北省",
"value": "130000"
},
{
"name": "山西省",
"value": "140000"
},
{
"name": "内蒙古自治区",
"value": "150000"
},
{
"name": "辽宁省",
"value": "210000"
},
{
"name": "吉林省",
"value": "220000"
},
{
"name": "黑龙江省",
"value": "230000"
},
{
"name": "上海市",
"value": "310000"
},
{
"name": "江苏省",
"value": "320000"
},
{
"name": "浙江省",
"value": "330000"
},
{
"name": "安徽省",
"value": "340000"
},
{
"name": "福建省",
"value": "350000"
},
{
"name": "江西省",
"value": "360000"
},
{
"name": "山东省",
"value": "370000"
},
{
"name": "河南省",
"value": "410000"
},
{
"name": "湖北省",
"value": "420000"
},
{
"name": "湖南省",
"value": "430000"
},
{
"name": "广东省",
"value": "440000"
},
{
"name": "广西壮族自治区",
"value": "450000"
},
{
"name": "海南省",
"value": "460000"
},
{
"name": "重庆市",
"value": "500000"
},
{
"name": "四川省",
"value": "510000"
},
{
"name": "贵州省",
"value": "520000"
},
{
"name": "云南省",
"value": "530000"
},
{
"name": "西藏自治区",
"value": "540000"
},
{
"name": "陕西省",
"value": "610000"
},
{
"name": "甘肃省",
"value": "620000"
},
{
"name": "青海省",
"value": "630000"
},
{
"name": "宁夏回族自治区",
"value": "640000"
},
{
"name": "新疆维吾尔自治区",
"value": "650000"
},
{
"name": "市辖区",
"value": "110100",
"parent": "110000"
},
{
"name": "东城区",
"value": "110101",
"parent": "110100"
},
{
"name": "西城区",
"value": "110102",
"parent": "110100"
},
{
"name": "朝阳区",
"value": "110105",
"parent": "110100"
},
{
"name": "丰台区",
"value": "110106",
"parent": "110100"
},
{
"name": "石景山区",
"value": "110107",
"parent": "110100"
},
{
"name": "海淀区",
"value": "110108",
"parent": "110100"
},
{
"name": "门头沟区",
"value": "110109",
"parent": "110100"
},