该博客介绍了使用Vue3封装省市区选择器组件的方法。通过element-plus Cascader级联选择器实现，先对省市区数据源进行处理，将其处理成树形结构，接着封装AreaSelect省市区选择器组件，最后说明了在页面中的使用，省市区数据来源为@vant/area-data。
前言
vue3封装一个省市区选择器组件，通过element-plus Cascader 级联选择器实现，效果如下：
一、省市区数据源处理
data.js
var areaList = {
province_list: {
11e4: "北京市",
12e4: "天津市",
13e4: "河北省",
14e4: "山西省",
15e4: "内蒙古自治区",
21e4: "辽宁省",
22e4: "吉林省",
23e4: "黑龙江省",
31e4: "上海市",
32e4: "江苏省",
33e4: "浙江省",
34e4: "安徽省",
35e4: "福建省",
36e4: "江西省",
37e4: "山东省",
41e4: "河南省",
42e4: "湖北省",
43e4: "湖南省",
44e4: "广东省",
45e4: "广西壮族自治区",
46e4: "海南省",
5e5: "重庆市",
51e4: "四川省",
52e4: "贵州省",
53e4: "云南省",
54e4: "西藏自治区",
61e4: "陕西省",
62e4: "甘肃省",
63e4: "青海省",
64e4: "宁夏回族自治区",
65e4: "新疆维吾尔自治区",
71e4: "台湾省",
81e4: "香港特别行政区",
82e4: "澳门特别行政区"
},
city_list: {
110100: "北京市",
120100: "天津市",
130100: "石家庄市",
130200: "唐山市",
130300: "秦皇岛市",
130400: "邯郸市",
130500: "邢台市",
130600: "保定市",
130700: "张家口市",
130800: "承德市",
130900: "沧州市",
131e3: "廊坊市",
131100: "衡水市",
140100: "太原市",
140200: "大同市",
140300: "阳泉市",
140400: "长治市",
140500: "晋城市",
140600: "朔州市",
140700: "晋中市",
140800: "运城市",
140900: "忻州市",
141e3: "临汾市",
141100: "吕梁市",
150100: "呼和浩特市",
150200: "包头市",
150300: "乌海市",
150400: "赤峰市",
150500: "通辽市",
150600: "鄂尔多斯市",
150700: "呼伦贝尔市",
150800: "巴彦淖尔市",
150900: "乌兰察布市",
152200: "兴安盟",
152500: "锡林郭勒盟",
152900: "阿拉善盟",
210100: "沈阳市",
210200: "大连市",
210300: "鞍山市",
210400: "抚顺市",
210500: "本溪市",
210600: "丹东市",
210700: "锦州市",
210800: "营口市",
210900: "阜新市",
211e3: "辽阳市",
211100: "盘锦市",
211200: "铁岭市",
211300: "朝阳市",
211400: "葫芦岛市",
220100: "长春市",
220200: "吉林市",
220300: "四平市",
220400: "辽源市",
220500: "通化市",
220600: "白山市",
220700: "松原市",
220800: "白城市",
222400: "延边朝鲜族自治州",
230100: "哈尔滨市",
230200: "齐齐哈尔市",
230300: "鸡西市",
230400: "鹤岗市",
230500: "双鸭山市",
230600: "大庆市",
230700: "伊春市",
230800: "佳木斯市",
230900: "七台河市",
231e3: "牡丹江市",
231100: "黑河市",
231200: "绥化市",
232700: "大兴安岭地区",
310100: "上海市",
320100: "南京市",
320200: "无锡市",
320300: "徐州市",
320400: "常州市",
320500: "苏州市",
320600: "南通市",
320700: "连云港市",
320800: "淮安市",
320900: "盐城市",
321e3: "扬州市",
321100: "镇江市",
321200: "泰州市",
321300: "宿迁市",
330100: "杭州市",
330200: "宁波市",
330300: "温州市",
330400: "嘉兴市",
330500: "湖州市",
330600: "绍兴市",
330700: "金华市",
330800: "衢州市",
330900: "舟山市",
331e3: "台州市",
331100: "丽水市",
340100: "合肥市",
340200: "芜湖市",
340300: "蚌埠市",
340400: "淮南市",
340500: "马鞍山市",
340600: "淮北市",
340700: "铜陵市",
340800: "安庆市",
341e3: "黄山市",
341100: "滁州市",
341200: "阜阳市",
341300: "宿州市",
341500: "六安市",
341600: "亳州市",
341700: "池州市",
341800: "宣城市",
350100: "福州市",
350200: "厦门市",
350300: "莆田市",
350400: "三明市",
350500: "泉州市",
350600: "漳州市",
350700: "南平市",
350800: "龙岩市",
350900: "宁德市",
360100: "南昌市",
360200: "景德镇市",
360300: "萍乡市",
360400: "九江市",
360500: "新余市",
360600: "鹰潭市",
360700: "赣州市",
360800: "吉安市",
360900: "宜春市",
361e3: "抚州市",
361100: "上饶市",
370100: "济南市",
370200: "青岛市",
370300: "淄博市",
370400: "枣庄市",
370500: "东营市",
370600: "烟台市",
370700: "潍坊市",
370800: "济宁市",
370900: "泰安市",
371e3: "威海市",
371100: "日照市",
371300: "临沂市",
371400: "德州市",
371500: "聊城市",
371600: "滨州市",
371700: "菏泽市",
410100: "郑州市",
410200: "开封市",
410300: "洛阳市",
410400: "平顶山市",
410500: "安阳市",
410600: "鹤壁市",
410700: "新乡市",
410800: "焦作市",
410900: "濮阳市",
411e3: "许昌市",
411100: "漯河市",
411200: "三门峡市",
411300: "南阳市",
411400: "商丘市",
411500: "信阳市",
411600: "周口市",
411700: "驻马店市",
419e3: "省直辖县",
420100: "武汉市",
420200: "黄石市",
420300: "十堰市",
420500: "宜昌市",
420600: "襄阳市",
420700: "鄂州市",
420800: "荆门市",
420900: "孝感市",
421e3: "荆州市",
421100: "黄冈市",
421200: "咸宁市",
421300: "随州市",
422800: "恩施土家族苗族自治州",
429e3: "省直辖县",
430100: "长沙市",
430200: "株洲市",
430300: "湘潭市",
430400: "衡阳市",
430500: "邵阳市",
430600: "岳阳市",
430700: "常德市",
430800: "张家界市",
430900: "益阳市",
431e3: "郴州市",
431100: "永州市",
431200: "怀化市",
431300: "娄底市",
433100: "湘西土家族苗族自治州",
440100: "广州市",
440200: "韶关市",
440300: "深圳市",
440400: "珠海市",
440500: "汕头市",
440600: "佛山市",
440700: "江门市",
440800: "湛江市",
440900: "茂名市",
441200: "肇庆市",
441300: "惠州市",
441400: "梅州市",
441500: "汕尾市",
441600: "河源市",
441700: "阳江市",
441800: "清远市",
441900: "东莞市",
442e3: "中山市",
445100: "潮州市",
445200: "揭阳市",
445300: "云浮市",
450100: "南宁市",
450200: "柳州市",
450300: "桂林市",
450400: "梧州市",
450500: "北海市",
450600: "防城港市",
450700: "钦州市",
450800: "贵港市",
450900: "玉林市",
451e3: "百色市",
451100: "贺州市",
451200: "河池市",
451300: "来宾市",
451400: "崇左市",
460100: "海口市",
460200: "三亚市",
460300: "三沙市",
460400: "儋州市",
469e3: "省直辖县",
500100: "重庆市",
500200: "县",
510100: "成都市",
510300: "自贡市",
510400: "攀枝花市",
510500: "泸州市",
510600: "德阳市",
510700: "绵阳市",
510800: "广元市",
510900: "遂宁市",
511e3: "内江市",
511100: "乐山市",
511300: "南充市",
511400: "眉山市",
511500: "宜宾市",
511600: "广安市",
511700: "达州市",
511800: "雅安市",
511900: "巴中市",
512e3: "资阳市",
513200: "阿坝藏族羌族自治州",
513300: "甘孜藏族自治州",
513400: "凉山彝族自治州",
520100: "贵阳市",
520200: "六盘水市",
520300: "遵义市",
520400: "安顺市",
520500: "毕节市",
520600: "铜仁市",
522300: "黔西南布依族苗族自治州",
522600: "黔东南苗族侗族自治州",
522700: "黔南布依族苗族自治州",
530100: "昆明市",
530300: "曲靖市",
530400: "玉溪市",
530500: "保山市",
530600: "昭通市",
530700: "丽江市",
530800: "普洱市",
530900: "临沧市",
532300: "楚雄彝族自治州",
532500: "红河哈尼族彝族自治州",
532600: "文山壮族苗族自治州",
532800: "西双版纳傣族自治州",
532900: "大理白族自治州",
533100: "德宏傣族景颇族自治州",
533300: "怒江傈僳族自治州",
533400: "迪庆藏族自治州",
540100: "拉萨市",
540200: "日喀则市",
540300: "昌都市",
540400: "林芝市",
540500: "山南市",
540600: "那曲市",
542500: "阿里地区",
610100: "西安市",
610200: "铜川市",
610300: "宝鸡市",
610400: "咸阳市",
610500: "渭南市",
610600: "延安市",
610700: "汉中市",
610800: "榆林市",
610900: "安康市",
611e3: "商洛市",
620100: "兰州市",
620200: "嘉峪关市",
620300: "金昌市",
620400: "白银市",
620500: "天水市",
620600: "武威市",
620700: "张掖市",
620800: "平凉市",
620900: "酒泉市",
621e3: "庆阳市",
621100: "定西市",
621200: "陇南市",
622900: "临夏回族自治州",
623e3: "甘南藏族自治州",
630100: "西宁市",
630200: "海东市",
632200: "海北藏族自治州",
632300: "黄南藏族自治州",
632500: "海南藏族自治州",
632600: "果洛藏族自治州",
632700: "玉树藏族自治州",
632800: "海西蒙古族藏族自治州",
640100: "银川市",
640200: "石嘴山市",
640300: "吴忠市",
640400: "固原市",
640500: "中卫市",
650100: "乌鲁木齐市",
650200: "克拉玛依市",
650400: "吐鲁番市",
650500: "哈密市",
652300: "昌吉回族自治州",
652700: "博尔塔拉蒙古自治州",
652800: "巴音郭楞蒙古自治州",
652900: "阿克苏地区",
653e3: "克孜勒苏柯尔克孜自治州",
653100: "喀什地区",
653200: "和田地区",
654e3: "伊犁哈萨克自治州",
654200: "塔城地区",
654300: "阿勒泰地区",
659e3: "自治区直辖县级行政区划",
710100: "台北市",
710200: "高雄市",
710300: "台南市",
710400: "台中市",
710500: "金门县",
710600: "南投县",
710700: "基隆市",
710800: "新竹市",
710900: "嘉义市",
711100: "新北市",
711200: "宜兰县",
711300: "新竹县",
711400: "桃园市",
711500: "苗栗县",
711700: "彰化县",
711900: "嘉义县",
712100: "云林县",
712400: "屏东县",
712500: "台东县",
712600: "花莲县",
712700: "澎湖县",
712800: "连江县",
810100: "香港岛",
810200: "九龙",
810300: "新界",
820100: "澳门半岛",
820200: "离岛"
},
county_list: {
110101: "东城区",
110102: "西城区",
110105: "朝阳区",
110106: "丰台区",
110107: "石景山区",
110108: "海淀区",
110109: "门头沟区",
110111: "房山区",
110112: "通州区",
110113: "顺义区",
110114: "昌平区",
110115: "大兴区",
110116: "怀柔区",
110117: "平谷区",
110118: "密云区",
110119: "延庆区",
120101: "和平区",
120102: "河东区",
120103: "河西区",
120104: "南开区",
120105: "河北区",
120106: "红桥区",
120110: "东丽区",
120111: "西青区",
120112: "津南区",
120113: "北辰区",
120114: "武清区",
120115: "宝坻区",
120116: "滨海新区",
120117: "宁河区",
120118: "静海区",
120119: "蓟州区",
130102: "长安区",
130104: "桥西区",
130105: "新华区",
130107: "井陉矿区",
130108: "裕华区",
130109: "藁城区",
130110: "鹿泉区",
130111: "栾城区",
130121: "井陉县",
130123: "正定县",
130125: "行唐县",
130126: "灵寿县",
130127: "高邑县",
130128: "深泽县",
130129: "赞皇县",
130130: "无极县",
130131: "平山县",
130132: "元氏县",
130133: "赵县",
130171: "石家庄高新技术产业开发区",
130172: "石家庄循环化工园区",
130181: "辛集市",
130183: "晋州市",
130184: "新乐市",
130202: "路南区",
130203: "路北区",
130204: "古冶区",
130205: "开平区",
130207: "丰南区",
130208: "丰润区",
130209: "曹妃甸区",
130224: "滦南县",
130225: "乐亭县",
130227: "迁西县",
130229: "玉田县",
130273: "唐山高新技术产业开发区",
130274: "河北唐山海港经济开发区",
130281: "遵化市",
130283: "迁安市",
130284: "滦州市",
130302: "海港区",
130303: "山海关区",
130304: "北戴河区",
130306: "抚宁区",
130321: "青龙满族自治县",
130322: "昌黎县",
130324: "卢龙县",
130371: "秦皇岛市经济技术开发区",
130372: "北戴河新区",
130390: "经济技术开发区",
130402: "邯山区",
130403: "丛台区",
130404: "复兴区",
130406: "峰峰矿区",
130407: "肥乡区",
130408: "永年区",
130423: "临漳县",
130424: "成安县",
130425: "大名县",
130426: "涉县",
130427: "磁县",
130430: "邱县",
130431: "鸡泽县",
130432: "广平县",
130433: "馆陶县",
130434: "魏县",
130435: "曲周县",
130471: "邯郸经济技术开发区",
130473: "邯郸冀南新区",
130481: "武安市",
130502: "襄都区",
130503: "信都区",
130505: "任泽区",
130506: "南和区",
130522: "临城县",
130523: "内丘县",
130524: "柏乡县",
130525: "隆尧县",
130528: "宁晋县",
130529: "巨鹿县",
130530: "新河县",
130531: "广宗县",
130532: "平乡县",
130533: "威县",
130534: "清河县",
130535: "临西县",
130571: "河北邢台经济开发区",
130581: "南宫市",
130582: "沙河市",
130602: "竞秀区",
130606: "莲池区",
130607: "满城区",
130608: "清苑区",
130609: "徐水区",
130623: "涞水县",
130624: "阜平县",
130626: "定兴县",
130627: "唐县",
130628: "高阳县",
130629: "容城县",
130630: "涞源县",
130631: "望都县",
130632: "安新县",
130633: "易县",
130634: "曲阳县",
130635: "蠡县",
130636: "顺平县",
130637: "博野县",
130638: "雄县",
130671: "保定高新技术产业开发区",
130672: "保定白沟新城",
130681: "涿州市",
130682: "定州市",
130683: "安国市",
130684: "高碑店市",
130702: "桥东区",
130703: "桥西区",
130705: "宣化区",
130706: "下花园区",
130708: "万全区",
130709: "崇礼区",
130722: "张北县",
130723: "康保县",
130724: "沽源县",
130725: "尚义县",
130726: "蔚县",
130727: "阳原县",
130728: "怀安县",
130730: "怀来县",
130731: "涿鹿县",
130732: "赤城县",
130772: "张家口市察北管理区",
130802: "双桥区",
130803: "双滦区",
130804: "鹰手营子矿区",
130821: "承德县",
130822: "兴隆县",
130824: "滦平县",
130825: "隆化县",
130826: "丰宁满族自治县",
130827: "宽城满族自治县",
130828: "围场满族蒙古族自治县",
130871: "承德高新技术产业开发区",
130881: "平泉市",
130902: "新华区",
130903: "运河区",
130921: "沧县",
130922: "青县",
130923: "东光县",
130924: "海兴县",
130925: "盐山县",
130926: "肃宁县",
130927: "南皮县",
130928: "吴桥县",
130929: "献县",
130930: "孟村回族自治县",
130971: "河北沧州经济开发区",
130972: "沧州高新技术产业开发区",
130973: "沧州渤海新区",
130981: "泊头市",
130982: "任丘市",
130983: "黄骅市",
130984: "河间市",
131002: "安次区",
131003: "广阳区",
131022: "固安县",
131023: "永清县",
131024: "香河县",
131025: "大城县",
131026: "文安县",
131028: "大厂回族自治县",
131071: "廊坊经济技术开发区",
131081: "霸州市",
131082: "三河市",
131090: "开发区",
131102: "桃城区",
131103: "冀州区",
131121: "枣强县",
131122: "武邑县",
131123: "武强县",
131124: "饶阳县",
131125: "安平县",
131126: "故城县",
131127: "景县",
131128: "阜城县",
131171: "河北衡水经济开发区",
131172: "衡水滨湖新区",
131182: "深州市",
140105: "小店区",
140106: "迎泽区",
140107: "杏花岭区",
140108: "尖草坪区",
140109: "万柏林区",
140110: "晋源区",
140121: "清徐县",
140122: "阳曲县",
140123: "娄烦县",
140181: "古交市",
140212: "新荣区",
140213: "平城区",
140214: "云冈区",
140215: "云州区",
140221: "阳高县",
140222: "天镇县",
140223: "广灵县",
140224: "灵丘县",
140225: "浑源县",
140226: "左云县",
140271: "山西大同经济开发区",
140302: "城区",
140303: "矿区",
140311: "郊区",
140321: "平定县",
140322: "盂县",
140403: "潞州区",
140404: "上党区",
140405: "屯留区",
140406: "潞城区",
140423: "襄垣县",
140425: "平顺县",
140426: "黎城县",
140427: "壶关县",
140428: "长子县",
140429: "武乡县",
140430: "沁县",
140431: "沁源县",
140471: "山西长治高新技术产业园区",
140502: "城区",
140521: "沁水县",
140522: "阳城县",
140524: "陵川县",
140525: "泽州县",
140581: "高平市",
140602: "朔城区",
140603: "平鲁区",
140621: "山阴县",
140622: "应县",
140623: "右玉县",
140671: "山西朔州经济开发区",
140681: "怀仁市",
140702: "榆次区",
140703: "太谷区",
140721: "榆社县",
140722: "左权县",
140723: "和顺县",
140724: "昔阳县",
140725: "寿阳县",
140727: "祁县",
140728: "平遥县",
140729: "灵石县",
140781: "介休市",
140802: "盐湖区",
140821: "临猗县",
140822: "万荣县",
140823: "闻喜县",
140824: "稷山县",
140825: "新绛县",
140826: "绛县",
140827: "垣曲县",
140828: "夏县",
140829: "平陆县",
140830: "芮城县",
140881: "永济市",
140882: "河津市",
140902: "忻府区",
140921: "定襄县",
140922: "五台县",
140923: "代县",
140924: "繁峙县",
140925: "宁武县",
140926: "静乐县",
140927: "神池县",
140928: "五寨县",
140929: "岢岚县",
140930: "河曲县",
140931: "保德县",
140932: "偏关县",
140971: "五台山风景名胜区",
140981: "原平市",
141002: "尧都区",
141021: "曲沃县",
141022: "翼城县",
141023: "襄汾县",
141024: "洪洞县",
141025: "古县",
141026: "安泽县",
141027: "浮山县",
141028: "吉县",
141029: "乡宁县",
141030: "大宁县",
141031: "隰县",
141032: "永和县",
141033: "蒲县",
141034: "汾西县",
141081: "侯马市",
141082: "霍州市",
141102: "离石区",
141121: "文水县",
141122: "交城县",
141123: "兴县",
141124: "临县",
141125: "柳林县",
141126: "石楼县",
141127: "岚县",
141128: "方山县",
141129: "中阳县",
141130: "交口县",
141181: "孝义市",
141182: "汾阳市",
150102: "新城区",
150103: "回民区",
150104: "玉泉区",
150105: "赛罕区",
150121: "土默特左旗",
150122: "托克托县",
150123: "和林格尔县",
150124: "清水河县",
150125: "武川县",
150172: "呼和浩特经济技术开发区",
150202: "东河区",
150203: "昆都仑区",
150204: "青山区",
150205: "石拐区",
150206: "白云鄂博矿区",
150207: "九原区",
150221: "土默特右旗",
150222: "固阳县",
150223: "达尔罕茂明安联合旗",
150271: "包头稀土高新技术产业开发区",
150302: "海勃湾区",
150303: "海南区",
150304: "乌达区",
150402: "红山区",
150403: "元宝山区",
150404: "松山区",
150421: "阿鲁科尔沁旗",
150422: "巴林左旗",
150423: "巴林右旗",
150424: "林西县",
150425: "克什克腾旗",
150426: "翁牛特旗",
150428: "喀喇沁旗",
150429: "宁城县",
150430: "敖汉旗",
150502: "科尔沁区",
150521: "科尔沁左翼中旗",
150522: "科尔沁左翼后旗",
150523: "开鲁县",
150524: "库伦旗",
150525: "奈曼旗",
150526: "扎鲁特旗",
150571: "通辽经济技术开发区",
150581: "霍林郭勒市",
150602: "东胜区",
150603: "康巴什区",
150621: "达拉特旗",
150622: "准格尔旗",
150623: "鄂托克前旗",
150624: "鄂托克旗",
150625: "杭锦旗",
150626
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
