Vue 实现省市区三级联动选择(附带JSON数据)

功能需求: 做一个省市区三级联动得选择控件,效果如图

在这里插入图片描述

1.html 部分

  • 代码
<div class="col-sm-10">
    <select id="s_province" name="s_province" class="form-control" style="width:32%" v-model="address.s_province">
        <option value="defualt" disabled>请选择省</option>
        <option v-for="index in address.g_dict"  :value="index.value">{
  { index.label }}</option>
    </select>
    <select id="s_city" name="s_city" class="form-control" style="width:33%" v-model="address.s_city">
        <option value="defualt" disabled>请选择市</option>
        <option v-for="index in address.f_dict" :value="index.value">{
  { index.label }}</option>
    </select>
    <select  id="s_county" name="s_county" class="form-control" style="width:33%" v-model="address.s_county">
        <option value="defualt" disabled>请选择区、县</option>
        <option v-for="index in address.s_dict" :value="index.value">{
  { index.label }}</option>
    </select>
</div>

2.js部分

var vm = new Vue({
   
	el:'#rrapp',
	data:{
   
		address: {
   
			g_dict:'',
			f_dict:'',
			s_dict:'',
			s_province:'defualt',
			s_city:'defualt',
			s_county:'defualt',
		},
	},
	watch:{
   
		"address.s_province":(val,oldVal)=>{
   
			if(val != 'defualt' && oldVal != 'defualt'){
   
				vm.address.s_city = "defualt"
				vm.address.s_county = "defualt"
			}
			for(let index in _areaDict){
   
				if(_areaDict[index].value  == val) {
   
					vm.address.f_dict = _areaDict[index].children
					return
				}
			}
		},
		"address.s_city":(val,oldVal)=>{
   
			if(val != 'defualt' && oldVal != 'defualt'){
   
				vm.address.s_county = "defualt"
			}
			for(let index in vm.address.f_dict){
   
				if(vm.address.f_dict[index].value  == val) {
   
					vm.address.s_dict = vm.address.f_dict[index].children
					return
				}
			}
		},
	},
	methods: {
   
		// 初始化函数 先清空对象值
		initArea: function (event){
   
			vm.address = {
   
				g_dict:'', // 爷字典 省级数据对象
				f_dict:'', // 父字典 市级数据对象
				s_dict:'', // 子字典 区、县数据对象
				s_province:'defualt', // 省级选择数据绑定
				s_city:'defualt', // 市级选择数据绑定
				s_county:'defualt', // 区县选择数据绑定
			};
			vm.address.g_dict = _areaDict
		},
		// 设置值方法 编辑取值赋值用 存label值
		setArea:function (event){
   
			let address = vm.possCustomerInfo.address
			address = address.split(',')
			for(let i in _areaDict){
   
				if(_areaDict[i].label == address[0]){
   
					vm.address.s_province = _areaDict[i].value
					for(let j in _areaDict[i].children){
   
						if(_areaDict[i].children[j].label == address[1]){
   
							vm.address.s_city = _areaDict[i].children[j].value
							for(let k in  _areaDict[i].children[j].children){
   
								if( _areaDict[i].children[j].children[k].label == address[2]){
   
									vm.address.s_county = _areaDict[i].children[j].children[k].value
									return
								}
							}
						}
					}
				}  
			}
		}
	}
});

3.JSON 格式数据

笔者这里用js对象格式替代json文件

var _areaDict = [ {
    "value": 1, "label": "北京", "children": [ {
    "value": 2, "label": "北京市", "children": [ {
    "value": 3, "label": "东城区" }, {
    "value": 8, "label": "丰台区" }, {
    "value": 16, "label": "大兴区" }, {
    "value": 6, "label": "宣武区" }, {
    "value": 19, "label": "密云县" }, {
    "value": 5, "label": "崇文区" }, {
    "value": 18, "label": "平谷区" }, {
    "value": 20, "label": "延庆县" }, {
    "value": 17, "label": "怀柔区" }, {
    "value": 12, "label": "房山区" }, {
    "value": 15, "label": "昌平区" }, {
    "value": 7, "label": "朝阳区" }, {
    "value": 10, "label": "海淀区" }, {
    "value": 9, "label": "石景山区" }, {
    "value": 4, "label": "西城区" }, {
    "value": 13, "label": "通州区" }, {
    "value": 11, "label": "门头沟区" }, {
    "value": 14, "label": "顺义区" } ] } ] }, {
    "value": 104, "label": "安徽", "children": [ {
    "value": 105, "label": "合肥市", "children": [ {
    "value": 109, "label": "包河区" }, {
    "value": 3255, "label": "巢湖市" }, {
    "value": 107, "label": "庐阳区" }, {
    "value": 106, "label": "瑶海区" }, {
    "value": 111, "label": "肥东县" }, {
    "value": 112, "label": "肥西县" }, {
    "value": 108, "label": "蜀山区" }, {
    "value": 110, "label": "长丰县" } ] }, {
    "value": 113, "label": "安庆市", "children": [ {
    "value": 115, "label": "大观区" }, {
    "value": 120, "label": "太湖县" }, {
    "value": 121, "label": "宿松县" }, {
    "value": 123, "label": "岳西县" }, {
    "value": 117, "label": "怀宁县" }, {
    "value": 122, "label": "望江县" }, {
    "value": 118, "label": "枞阳县" }, {
    "value": 124, "label": "桐城市" }, {
    "value": 119, "label": "潜山县" }, {
    "value": 114, "label": "迎江区" }, {
    "value": 116, "label": "郊区" } ] }, {
    "value": 125, "label": "蚌埠市", "children": [ {
    "value": 131, "label": "五河县" }, {
    "value": 132, "label": "固镇县" }, {
    "value": 130, "label": "怀远县" }, {
    "value": 129, "label": "淮上区" }, {
    "value": 128, "label": "禹会区" }, {
    "value": 127, "label": "蚌山区" }, {
    "value": 126, "label": "龙子湖区" } ] }, {
    "value": 133, "label": "亳州市", "children": [ {
    "value": 137, "label": "利辛县" }, {
    "value": 135, "label": "涡阳县" }, {
    "value": 136, "label": "蒙城县" }, {
    "value": 134, "label": "谯城区" } ] }, {
    "value": 138, "label": "巢湖市", "children": [ {
    "value": 142, "label": "含山县" }, {
    "value": 143, "label": "和县" }, {
    "value": 139, "label": "居巢区" }, {
    "value": 140, "label": "庐江县" }, {
    "value": 141, "label": "无为县" } ] }, {
    "value": 144, "label": "池州市", "children": [ {
    "value": 146, "label": "东至县" }, {
    "value": 147, "label": "石台县" }, {
    "value": 145, "label": "贵池区" }, {
    "value": 148, "label": "青阳县" } ] }, {
    "value": 149, "label": "滁州市", "children": [ {
    "value": 153, "label": "全椒县" }, {
    "value": 155, "label": "凤阳县" }, {
    "value": 151, "label": "南谯区" }, {
    "value": 156, "label": "天长市" }, {
    "value": 154, "label": "定远县" }, {
    "value": 157, "label": "明光市" }, {
    "value": 152, "label": "来安县" }, {
    "value": 150, "label": "琅琊区" } ] }, {
    "value": 158, "label": "阜阳市", "children": [ {
    "value": 162, "label": "临泉县" }, {
    "value": 163, "label": "太和县" }, {
    "value": 166, "label": "界首市" }, {
    "value": 164, "label": "阜南县" }, {
    "value": 165, "label": "颍上县" }, {
    "value": 160, "label": "颍东区" }, {
    "value": 159, "label": "颍州区" }, {
    "value": 161, "label": "颍泉区" } ] }, {
    "value": 167, "label": "淮北市", "children": [ {
    "value": 168, "label": "杜集区" }, {
    "value": 171, "label": "濉溪县" }, {
    "value": 170, "label": "烈山区" }, {
    "value": 169, "label": "相山区" } ] }, {
    "value": 172, "label": "淮南市", "children": [ {
    "value": 176, "label": "八公山区" }, {
    "value": 178, "label": "凤台县" }, {
    "value": 173, "label": "大通区" }, {
    "value": 177, "label": "潘集区" }, {
    "value": 174, "label": "田家庵区" }, {
    "value": 175, "label": "谢家集区" } ] }, {
    "value": 179, "label": "黄山市", "children": [ {
    "value": 184, "label": "休宁县" }, {
    "value": 180, "label": "屯溪区" }, {
    "value": 182, "label": "徽州区" }, {
    "value": 183, "label": "歙县" }, {
    "value": 186, "label": "祁门县" }, {
    "value": 181, "label": "黄山区" }, {
    "value": 185, "label": "黟县" } ] }, {
    "value": 187, "label": "六安市", "children": [ {
    "value": 190, "label": "寿县" }, {
    "value": 192, "label": "舒城县" }, {
    "value": 189, "label": "裕安区" }, {
    "value": 188, "label": "金安区" }, {
    "value": 193, "label": "金寨县" }, {
    "value": 194, "label": "霍山县" }, {
    "value": 191, "label": "霍邱县" } ] }, {
    "value": 195, "label": "马鞍山市", "children": [ {
    "value": 199, "label": "当涂县" }, {
    "value": 197, "label": "花山区" }, {
    "value": 196, "label": "金家庄区" }, {
    "value": 198, "label": "雨山区" } ] }, {
    "value": 200, "label": "宿州市", "children": [ {
    "value": 201, "label": "墉桥区" }, {
    "value": 205, "label": "泗县" }, {
    "value": 204, "label": "灵璧县" }, {
    "value": 202, "label": "砀山县" }, {
    "value": 203, "label": "萧县" } ] }, {
    "value": 206, "label": "铜陵市", "children": [ {
    "value": 208, "label": "狮子山区" }, {
    "value": 209, "label": "郊区" }, {
    "value": 207, "label": "铜官山区" }, {
    "value": 210, "label": "铜陵县" } ] }, {
    "value": 211, "label": "芜湖市", "children": [ {
    "value": 218, "label": "南陵县" }, {
    "value": 214, "label": "新芜区" }, {
    "value": 217, "label": "繁昌县" }, {
    "value": 216, "label": "芜湖县" }, {
    "value": 212, "label": "镜湖区" }, {
    "value": 213, "label": "马塘区" }, {
    "value": 215, "label": "鸠江区" } ] }, {
    "value": 219, "label": "宣城市", "children": [ {
    "value": 226, "label": "宁国市" }, {
    "value": 220, "label": "宣州区" }, {
    "value": 222, "label": "广德县" }, {
    "value": 225, "label": "旌德县" }, {
    "value": 223, "label": "泾县" }, {
    "value": 224, "label": "绩溪县" }, {
    "value": 221, "label": "郎溪县" } ] } ] }, {
    "value": 1176, "label": "黑龙江", "children": [ {
    "value": 1177, "label": "哈尔滨市", "children": [ {
    "value": 1196, "label": "五常市" }, {
    "value": 1186, "label": "依兰县" }, {
    "value": 1182, "label": "动力区" }, {
    "value": 1179, "label": "南岗区" }, {
    "value": 1194, "label": "双城市" }, {
    "value": 1185, "label": "呼兰区" }, {
    "value": 1188, "label": "宾县" }, {
    "value": 1195, "label": "尚志市" }, {
    "value": 1189, "label": "巴彦县" }, {
    "value": 1183, "label": "平房区" }, {
    "value": 1192, "label": "延寿县" }, {
    "value": 1187, "label": "方正县" }, {
    "value": 1190, "label": "木兰县" }, {
    "value": 1184, "label": "松北区" }, {
    "value": 1191, "label": "通河县" }, {
    "value": 1180, "label": "道外区" }, {
    "value": 1178, "label": "道里区" }, {
    "value": 1193, "label": "阿城市" }, {
    "value": 1181, "label": "香坊区" } ] }, {
    "value": 1197, "label": "大庆市", "children": [ {
    "value": 1202, "label": "大同区" }, {
    "value": 1206, "label": "杜尔伯特蒙古族自治县" }, {
    "value": 1205, "label": "林甸县" }, {
    "value": 1201, "label": "红岗区" }, {
    "value": 1203, "label": "肇州县" }, {
    "value": 1204, "label": "肇源县" }, {
    "value": 1198, "label": "萨尔图区" }, {
    "value": 1200, "label": "让胡路区" }, {
    "value": 1199, "label": "龙凤区" } ] }, {
    "value": 1207, "label": "大兴安岭地区", "children": [ {
    "value": 1208, "label": "呼玛县" }, {
    "value": 1209, "label": "塔河县" }, {
    "value": 1210, "label": "漠河县" } ] }, {
    "value": 1211, "label": "鹤岗市", "children": [ {
    "value": 1216, "label": "东山区" }, {
    "value": 1215, "label": "兴安区" }, {
    "value": 1217, "label": "兴山区" }, {
    "value": 1214, "label": "南山区" }, {
    "value": 1212, "label": "向阳区" }, {
    "value": 1213, "label": "工农区" }, {
    "value": 1219, "label": "绥滨县" }, {
    "value": 1218, "label": "萝北县" } ] }, {
    "value": 1220, "label": "黑河市", "children": [ {
    "value": 1226, "label": "五大连池市" }, {
    "value": 1225, "label": "北安市" }, {
    "value": 1222, "label": "嫩江县" }, {
    "value": 1224, "label": "孙吴县" }, {
    "value": 1221, "label": "爱辉区" }, {
    "value": 1223, "label": "逊克县" } ] }, {
    "value": 1227, "label": "鸡西市", "children": [ {
    "value": 1232, "label": "城子河区" }, {
    "value": 1236, "label": "密山市" }, {
    "value": 1229, "label": "恒山区" }, {
    "value": 1231, "label": "梨树区" }, {
    "value": 1230, "label": "滴道区" }, {
    "value": 1235, "label": "虎林市" }, {
    "value": 1234, "label": "鸡东县" }, {
    "value": 1228, "label": "鸡冠区" }, {
    "value": 1233, "label": "麻山区" } ] }, {
    "value": 1237, "label": "佳木斯市", "children": [ {
    "value": 1241, "label": "东风区" }, {
    "value": 1240, "label": "前进区" }, {
    "value": 1247, "label": "同江市" }, {
    "value": 1239, "label": "向阳区" }, {
    "value": 1248, "label": "富锦市" }, {
    "value": 1246, "label": "抚远县" }, {
    "value": 1243, "label": "桦南县" }, {
    "value": 1244, "label": "桦川县" }, {
    "value": 1238, "label": "永红区" }, {
    "value": 1245, "label": "汤原县" }, {
    "value": 1242, "label": "郊区" } ] }, {
    "value": 1249, "label": "牡丹江市", "children": [ {
    "value": 1254, "label": "东宁县" }, {
    "value": 1250, "label": "东安区" }, {
    "value": 1258, "label": "宁安市" }, {
    "value": 1255, "label": "林口县" }, {
    "value": 1257, "label": "海林市" }, {
    "value": 1252, "label": "爱民区" }, {
    "value": 1259, "label": "穆棱市" }, {
    "value": 1256, "label": "绥芬河市" }, {
    "value": 1253, "label": "西安区" }, {
    "value": 1251, "label": "阳明区" } ] }, {
    "value": 1260, "label": "七台河市", "children": [ {
    "value": 1264, "label": "勃利县" }, {
    "value": 1261, "label": "新兴区" }, {
    "value": 1262, "label": "桃山区" }, {
    "value": 1263, "label": "茄子河区" } ] }, {
    "value": 1265, "label": "齐齐哈尔市", "children": [ {
    "value": 1274, "label": "依安县" }, {
    "value": 1279, "label": "克东县" }, {
    "value": 1278, "label": "克山县" }, {
    "value": 1270, "label": "富拉尔基区" }, {
    "value": 1277, "label": "富裕县" }, {
    "value": 1267, "label": "建华区" }, {
    "value": 1280, "label": "拜泉县" }, {
    "value": 1269, "label": "昂昂溪区" }, {
    "value": 1272, "label": "梅里斯达斡尔族区" }, {
    "value": 1275, "label": "泰来县" }, {
    "value": 1276, "label": "甘南县" }, {
    "value": 1271, "label": "碾子山区" }, {
    "value": 1281, "label": "讷河市" }, {
    "value": 1268, "label": "铁锋区" }, {
    "value": 1273, "label": "龙江县" }, {
    "value": 1266, "label": "龙沙区" } ] }, {
    "value": 1282, "label": "双鸭山市", "children": [ {
    "value": 1288, "label": "友谊县" }, {
    "value": 1285, "label": "四方台区" }, {
    "value": 1286, "label": "宝山区" }, {
    "value": 1289, "label": "宝清县" }, {
    "value": 1283, "label": "尖山区" }, {
    "value": 1284, "label": "岭东区" }, {
    "value": 1287, "label": "集贤县" }, {
    "value": 1290, "label": "饶河县" } ] }, {
    "value": 1291, "label": "绥化市", "children": [ {
    "value": 1294, "label": "兰西县" }, {
    "value": 1292, "label": "北林区" }, {
    "value": 1299, "label": "安达市" }, {
    "value": 1296, "label": "庆安县" }, {
    "value": 1297, "label": "明水县" }, {
    "value": 1293, "label": "望奎县" }, {
    "value": 1301, "label": "海伦市" }, {
    "value": 1298, "label": "绥棱县" }, {
    "value": 1300, "label": "肇东市" }, {
    "value": 1295, "label": "青冈县" } ] }, {
    "value": 1302, "label": "伊春市", "children": [ {
    "value": 1317, "label": "上甘岭区" }, {
    "value": 1315, "label": "乌伊岭区" }, {
    "value": 1312, "label": "乌马河区" }, {
    "value": 1311, "label": "五营区" }, {
    "value": 1303, "label": "伊春区" }, {
    "value": 1304, "label": "南岔区" }, {
    "value": 1305, "label": "友好区" }, {
    "value": 1318, "label": "嘉荫县" }, {
    "value": 1314, "label": "带岭区" }, {
    "value": 1308, "label": "新青区" }, {
    "value": 1313, "label": "汤旺河区" }, {
    "value": 1316, "label": "红星区" }, {
    "value": 1309, "label": "美溪区" }, {
    "value": 1307, "label": "翠峦区" }, {
    "value": 1306, "label": "西林区" }, {
    "value": 1310, "label": "金山屯区" }, {
    "value": 1319, "label": "铁力市" } ] } ] }, {
    "value": 1320, "label": "湖北", "children": [ {
    "value": 1321, "label": "武汉市", "children": [ {
    "value": 1329, "label": "东西湖区" }, {
    "value": 1334, "label": "新洲区" }, {
    "value": 1326, "label": "武昌区" }, {
    "value": 1330, "label": "汉南区" }, {
    "value": 1325, "label": "汉阳区" }, {
    "value": 1332, "label": "江夏区" }, {
    "value": 1322, "label": "江岸区" }, {
    "value": 1323, "label": "江汉区" }, {
    "value": 1328, "label": "洪山区" }, {
    "value": 1324, "label": "硚口区" }, {
    "value": 1331, "label": "蔡甸区" }, {
    "value": 1327, "label": "青山区" }, {
    "value": 1333, "label": "黄陂区" } ] }, {
    "value": 1335, "label": "鄂州市", "children": [ {
    "value": 1337, "label": "华容区" }, {
    "value": 1336, "label": "梁子湖区" }, {
    "value": 1338, "label": "鄂城区" } ] }, {
    "value": 1339, "label": "恩施土家族苗族自治州", "children": [ {
    "value": 1341, "label": "利川市" }, {
    "value": 1345, "label": "咸丰县" }, {
    "value": 1344, "label": "宣恩县" }, {
    "value": 1343, "label": "巴东县" }, {
    "value": 1342, "label": "建始县" }, {
    "value": 1340, "label": "恩施市" }, {
    "value": 1346, "label": "来凤县" }, {
    "value": 1347, "label": "鹤峰县" } ] }, {
    "value": 1348, "label": "黄冈市", "children": [ {
    "value": 1350, "label": "团风县" }, {
    "value": 1358, "label": "武穴市" }, {
    "value": 1354, "label": "浠水县" }, {
    "value": 1351, "label": "红安县" }, {
    "value": 1352, "label": "罗田县" }, {
    "value": 1353, "label": "英山县" }, {
    "value": 1355, "label": "蕲春县" }, {
    "value": 1357, "label": "麻城市" }, {
    "value": 1349, "label": "黄州区" }, {
    "value": 1356, "label": "黄梅县" } ] }, {
    "value": 1359, "label": "黄石市", "children": [ {
    "value": 1362, "label": "下陆区" }, {
    "value": 1365, "label": "大冶市" }, {
    "value": 1361, "label": "西塞山区" }, {
    "value": 1363, "label": "铁山区" }, {
    "value": 1364, "label": "阳新县" }, {
    "value": 1360, "label": "黄石港区" } ] }, {
    "value": 1366, "label": "荆门市", "children": [ {
    "value": 1367, "label": "东宝区" }, {
    "value": 1369, "label": "京山县" }, {
    "value": 1368, "label": "掇刀区" }, {
    "value": 1370, "label": "沙洋县" }, {
    "value": 1371, "label": "钟祥市" } ] }, {
    "value": 1372, "label": "荆州市", "children": [ {
    "value": 1375, "label": "公安县" }, {
    "value": 1380, "label": "松滋市" }, {
    "value": 1377, "label": "江陵县" }, {
    "value": 1373, "label": "沙市区" }, {
    "value": 1379, "label": "洪湖市" }, {
    "value": 1376, "label": "监利县" }, {
    "value": 1378, "label": "石首市" }, {
    "value": 1374, "label": "荆州区" } ] }, {
    "value": 1383, "label": "十堰市", "children": [ {
    "value": 1391, "label": "丹江口市" }, {
    "value": 1385, "label": "张湾区" }, {
    "value": 1390, "label": "房县" }, {
    "value": 1388, "label": "竹山县" }, {
    "value": 1389, "label": "竹溪县" }, {
    "value": 1384, "label": "茅箭区" }, {
    "value": 1386, "label": "郧县" }, {
    "value": 1387, "label": "郧西县" } ] }, {
    "value": 1392, "label": "随州市", "children": [ {
    "value": 1394, "label": "广水市" }, {
    "value": 1393, "label": "曾都区" } ] }, {
    "value": 1397, "label": "咸宁市", "children": [ {
    "value": 1398, "label": "咸安区" }, {
    "value": 1399, "label": "嘉鱼县" }, {
    "value": 1401, "label": "崇阳县" }, {
    "value": 1403, "label": "赤壁市" }, {
    "value": 1400, "label": "通城县" }, {
    "value": 1402, "label": "通山县" } ] }, {
    "value": 1404, "label": "襄樊市", "children": [ {
    "value": 1410, "label": "保康县" }, {
    "value": 1408, "label": "南漳县" }, {
    "value": 1413, "label": "宜城市" }, {
    "value": 1412, "label": "枣阳市" }, {
    "value": 1406, "label": "樊城区" }, {
    "value": 1411, "label": "老河口市" }, {
    "value": 1405, "label": "襄城区" }, {
    "value": 1407, "label": "襄阳区" }, {
    "value": 1409, "label": "谷城县" } ] }, {
    "value": 1414, "label": "孝感市", "children": [ {
    "value": 1418, "label": "云梦县" }, {
    "value": 1417, "label": "大悟县" }, {
    "value": 1415, "label": "孝南区" }, {
    "value": 1416, "label": "孝昌县" }, {
    "value": 1420, "label": "安陆市" }, {
    "value": 1419, "label": "应城市" }, {
    "value": 1421, "label": "汉川市" } ] }, {
    "value": 1422, "label": "宜昌市", "children": [ {
    "value": 1432, "label": "五峰土家族自治县" }, {
    "value": 1424, "label": "伍家岗区" }, {
    "value": 1429, "label": "兴山县" }, {
    "value": 1427, "label": "夷陵区" }, {
    "value": 1433, "label": "宜都市" }, {
    "value": 1434, "label": "当阳市" }, {
    "value": 1435, "label": "枝江市" }, {
    "value": 1425, "label": "点军区" }, {
    "value": 1426, "label": "猇亭区" }, {
    "value": 1430, "label": "秭归县" }, {
    "value": 1423, "label": "西陵区" }, {
    "value": 1428, "label": "远安县" }, {
    "value": 1431, "label": "长阳土家族自治县" } ] } ] }, {
    "value": 1436, "label": "湖南", "children": [ {
    "value": 1437, "label": "长沙市", "children": [ {
    "value": 1439, "label": "天心区" }, {
    "value": 1445, "label": "宁乡县" }, {
    "value": 1440, "label": "岳麓区" }, {
    "value": 1441, "label": "开福区" }, {
    "value": 1444, "label": "望城县" }, {
    "value": 1446, "label": "浏阳市" }, {
    "value": 1438, "label": "芙蓉区" }, {
    "value": 1443, "label": "长沙县" }, {
    "value": 1442, "label": "雨花区" } ] }, {
    "value": 1447, "label": "常德市", "children": [ {
    "value": 1453, "label": "临澧县" }, {
    "value": 1450, "label": "安乡县" }, {
    "value": 1454, "label": "桃源县" }, {
    "value": 1448, "label": "武陵区" }, {
    "value": 1451, "label": "汉寿县" }, {
    "value": 1456, "label": "津市市" }, {
    "value": 1452, "label": "澧县" }, {
    "value": 1455, "label": "石门县" }, {
    "value": 1449, "label": "鼎城区" } ] }, {
    "value": 1457, "label": "郴州市", "children": [ {
    "value": 1464, "label": "临武县" }, {
    "value": 1458, "label": "北湖区" }, {
    "value": 1463, "label": "嘉禾县" }, {
    "value": 1467, "label": "安仁县" }, {
    "value": 1461, "label": "宜章县" }, {
    "value": 1466, "label": "桂东县" }, {
    "value": 1460, "label": "桂阳县" }, {
    "value": 1462, "label": "永兴县" }, {
    "value": 1465, "label": "汝城县" }, {
    "value": 1459, "label": "苏仙区" }, {
    "value": 1468, "label": "资兴市" } ] }, {
    "value": 1469, "label": "衡阳市", "children": [ {
    "value": 1474, "label": "南岳区" }, {
    "value": 1481, "label": "常宁市" }, {
    "value": 1470, "label": "珠晖区" }, {
    "value": 1472, "label": "石鼓区" }, {
    "value": 1479, "label": "祁东县" }, {
    "value": 1480, "label": "耒阳市" }, {
    "value": 1473, "label": "蒸湘区" }, {
    "value": 1478, "label": "衡东县" }, {
    "value": 1476, "label": "衡南县" }, {
    "value": 1477, "label": "衡山县" }, {
    "value": 1475, "label": "衡阳县" }, {
    "value": 1471, "label": "雁峰区" } ] }, {
    "value": 1482, "label": "怀化市", "children": [ {
    "value": 1484, "label": "中方县" }, {
    "value": 1488, "label": "会同县" }, {
    "value": 1490, "label": "新晃侗族自治县" }, {
    "value": 1485, "label": "沅陵县" }, {
    "value": 1494, "label": "洪江市" }, {
    "value": 1487, "label": "溆浦县" }, {
    "value": 1491, "label": "芷江侗族自治县" }, {
    "value": 1486, "label": "辰溪县" }, {
    "value": 1493, "label": "通道侗族自治县" }, {
    "value": 1492, "label": "靖州苗族侗族自治县" }, {
    "value": 1483, "label": "鹤城区" }, {
    "value": 1489, "label": "麻阳苗族自治县" } ] }, {
    "value": 1495, "label": "娄底市", "children": [ {
    "value": 1499, "label": "冷水江市" }, {
    "value": 1497, "label": "双峰县" }, {
    "value": 1496, "label": "娄星区" }, {
    "value": 1498, "label": "新化县" }, {
    "value": 1500, "label": "涟源市" } ] }, {
    "value": 1501, "label": "邵阳市", "children": [ {
    "value": 1504, "label": "北塔区" }, {
    "value": 1502, "label": "双清区" }, {
    "value": 1512, "label": "城步苗族自治县" }, {
    "value": 1503, "label": "大祥区" }, {
    "value": 1511, "label": "新宁县" }, {
    "value": 1506, "label": "新邵县" }, {
    "value": 1513, "label": "武冈市" }, {
    "value": 1509, "label": "洞口县" }, {
    "value": 1510, "label": "绥宁县" }, {
    "value": 1505, "label": "邵东县" }, {
    "value": 1507, "label": "邵阳县" }, {
    "value": 1508, "label": "隆回县" } ] }, {
    "value": 1514, "label": "湘潭市", "children": [ {
    "value": 1516, "label": "岳塘区" }, {
    "value": 1518, "label": "湘乡市" }, {
    "value": 1517, "label": "湘潭县" }, {
    "value": 1515, "label": "雨湖区" }, {
    "value": 1519, "label": "韶山市" } ] }, {
    "value": 1520, "label": "湘西土家族苗族自治州", "children": [ {
    "value": 1525, "label": "保靖县" }, {
    "value": 1523, "label": "凤凰县" }, {
    "value": 1526, "label": "古丈县" }, {
    "value": 1521, "label": "吉首市" }, {
    "value": 1527, "label": "永顺县" }, {
    "value": 1522, "label": "泸溪县" }, {
    "value": 1524, "label": "花垣县" }, {
    "value": 1528, "label": "龙山县" } ] }, {
    "value": 1529, "label": "益阳市", "children": [ {
    "value": 1532, "label": "南县" }, {
    "value": 1534, "label": "安化县" }, {
    "value": 1533, "label": "桃江县" }, {
    "value": 1535, "label": "沅江市" }, {
    "value": 1530, "label": "资阳区" }, {
    "value": 1531, "label": "赫山区" } ] }, {
    "value": 1536, "label": "永州市", "children": [ {
    "value": 1540, "label": "东安县" }, {
    "value": 1538, "label": "冷水滩区" }, {
    "value": 1541, "label": "双牌县" }, {
    "value": 1544, "label": "宁远县" }, {
    "value": 1546, "label": "新田县" }, {
    "value": 1547, "label": "江华瑶族自治县" }, {
    "value": 1543, "label": "江永县" }, {
    "value": 1539, "label": "祁阳县" }, {
    "value": 1537, "label": "芝山区" }, {
    "value": 1545, "label": "蓝山县" }, {
    "value": 1542, "label": "道县" } ] }, {
    "value": 1548, "label": "岳阳市", "children": [ {
    "value": 1557, "label": "临湘市" }, {
    "value": 1550, "label": "云溪区" }, {
    "value": 1553, "label": "华容县" }, {
    "value": 1551, "label": "君山区" }, {
    "value": 1552, "label": "岳阳县" }, {
    "value": 1549, "label": "岳阳楼区" }, {
    "value": 1555, "label": "平江县" }, {
    "value": 1556, "label": "汨罗市" }, {
    "value": 1554, "label": "湘阴县" } ] }, {
    "value": 1558, "label": "张家界市", "children": [ {
    "value": 1561, "label": "慈利县" }, {
    "value": 1562, "label": "桑植县" }, {
    "value": 1560, "label": "武陵源区" }, {
    "value": 1559, "label": "永定区" } ] }, {
    "value": 1563, "label": "株洲市", "children": [ {
    "value": 1567, "label": "天元区" }, {
    "value": 1569, "label": "攸县" }, {
    "value": 1568, "label": "株洲县" }, {
    "value": 1571, "label": "炎陵县" }, {
    "value": 1566, "label": "石峰区" }, {
    "value": 1565, "label": "芦淞区" }, {
    "value": 1570, "label": "茶陵县" }, {
    "value": 1564, "label": "荷塘区" }, {
    "value": 1572, "label": "醴陵市" } ] } ] }, {
    "value": 1573, "label": "吉林", "children": [ {
    "value": 1574, "label": "长春市", "children": [ {
    "value": 1582, "label": "九台市" }, {
    "value": 1578, "label": "二道区" }, {
    "value": 1581, "label": "农安县" }, {
    "value": 1575, "label": "南关区" }, {
    "value": 1580, "label": "双阳区" }, {
    "value": 1576, "label": "宽城区" }, {
    "value": 1584, "label": "德惠市" }, {
    "value": 1577, "label": "朝阳区" }, {
    "value": 1583, "label": "榆树市" }, {
    "value": 1579, "label": "绿园区" } ] }, {
    "value": 1585, "label": "白城市", "children": [ {
    "value": 1590, "label": "大安市" }, {
    "value": 1586, "label": "洮北区" }, {
    "value": 1589, "label": "洮南市" }, {
    "value": 1588, "label": "通榆县" }, {
    "value": 1587, "label": "镇赉县" } ] }, {
    "value": 1591, "label": "白山市", "children": [ {
    "value": 1597, "label": "临江市" }, {
    "value": 1592, "label": "八道江区" }, {
    "value": 1593, "label": "抚松县" }, {
    "value": 1596, "label": "江源县" }, {
    "value": 1595, "label": "长白朝鲜族自治县" }, {
    "value": 1594, "label": "靖宇县" } ] }, {
    "value": 1598, "label": "吉林市", "children": [ {
    "value": 1602, "label": "丰满区" }, {
    "value": 1599, "label": "昌邑区" }, {
    "value": 1605, "label": "桦甸市" }, {
    "value": 1603, "label": "永吉县" }, {
    "value": 1607, "label": "磐石市" }, {
    "value": 1606, "label": "舒兰市" }, {
    "value": 1601, "label": "船营区" }, {
    "value": 1604, "label": "蛟河市" }, {
    "value": 1600, "label": "龙潭区" } ] }, {
    "value": 1608, "label": "辽源市", "children": [ {
    "value": 1611, "label": "东丰县" }, {
    "value": 1612, "label": "东辽县" }, {
    "value": 1610, "label": "西安区" }, {
    "value": 1609, "label": "龙山区" } ] }, {
    "value": 1613, "label": "四平市", "children": [ {
    "value": 1617, "label": "伊通满族自治县" }, {
    "value": 1618, "label": "公主岭市" }, {
    "value": 1619, "label": "双辽市" }, {
    "value": 1616, "label": "梨树县" }, {
    "value": 1615, "label": "铁东区" }, {
    "value": 1614, "label": "铁西区" } ] }, {
    "value": 1620, "label": "松原市", "children": [ {
    "value": 1624, "label": "乾安县" }, {
    "value": 1622, "label": "前郭尔罗斯蒙古族自治县" }, {
    "value": 1621, "label": "宁江区" }, {
    "value": 1625, "label": "扶余县" }, {
    "value": 1623, "label": "长岭县" } ] }, {
    "value": 1626, "label": "通化市", "children": [ {
    "value": 1627, "label": "东昌区" }, {
    "value": 1628, "label": "二道江区" }, {
    "value": 1631, "label": "柳河县" }, {
    "value": 1632, "label": "梅河口市" }, {
    "value": 1630, "label": "辉南县" }, {
    "value": 1629, "label": "通化县" }, {
    "value": 1633, "label": "集安市" } ] }, {
    "value": 1634, "label": "延边朝鲜族自治州", "children": [ {
    "value": 1640, "label": "和龙市" }, {
    "value": 1636, "label": "图们市" }, {
    "value": 1642, "label": "安图县" }, {
    "value": 1635, "label": "延吉市" }, {
    "value": 1637, "label": "敦化市" }, {
    "value": 1641, "label": "汪清县" }, {
    "value": 1638, "label": "珲春市" }, {
    "value": 1639, "label": "龙井市" } ] } ] }, {
    "value": 1643, "label"
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue 实现三级联动组件有很多种方式,以下是一种常见的实现方式: 1. 创建一个 Vue 组件,包含三个下拉框,分别用于选择省、、区。 2. 在组件中定义数据源,可以使用 JSON 格式,例如: ``` data() { return { provinces: [ { id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '广东省' } ], cities: [ { id: 1, name: '北京', parentId: 1 }, { id: 2, name: '上海', parentId: 2 }, { id: 3, name: '广州', parentId: 3 }, { id: 4, name: '深圳', parentId: 3 } ], areas: [ { id: 1, name: '东城区', parentId: 1 }, { id: 2, name: '西城区', parentId: 1 }, { id: 3, name: '黄浦区', parentId: 2 }, { id: 4, name: '徐汇区', parentId: 2 }, { id: 5, name: '天河区', parentId: 3 }, { id: 6, name: '番禺区', parentId: 3 }, { id: 7, name: '南山区', parentId: 4 }, { id: 8, name: '福田区', parentId: 4 } ], selectedProvince: '', selectedCity: '', selectedArea: '' } } ``` 其中,`provinces` 数组保存所有的省份信息,`cities` 数组保存所有的城信息,`areas` 数组保存所有的区县信息。 3. 绑定下拉框的选项值和显示文本: ``` <select v-model="selectedProvince"> <option value="">请选择省份</option> <option v-for="province in provinces" :value="province.id">{{ province.name }}</option> </select> <select v-model="selectedCity" :disabled="!selectedProvince"> <option value="">请选择</option> <option v-for="city in cities.filter(city => city.parentId == selectedProvince)" :value="city.id">{{ city.name }}</option> </select> <select v-model="selectedArea" :disabled="!selectedCity"> <option value="">请选择区县</option> <option v-for="area in areas.filter(area => area.parentId == selectedCity)" :value="area.id">{{ area.name }}</option> </select> ``` 在第二个和第三个下拉框中,通过 `:disabled` 属性来控制选项是否可用,当上级下拉框没有选择时,下级下拉框将被禁用。 4. 监听下拉框选项的变化,并更新选中的数据: ``` watch: { selectedProvince: function(val) { this.selectedCity = ''; this.selectedArea = ''; }, selectedCity: function(val) { this.selectedArea = ''; } } ``` 当选择的省份发生变化时,清空已选中的城和区县;当选择的城发生变化时,清空已选中的区县。 这样,一个简单的省市区三级联动组件就完成了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值