基于vue封装的城市择器组件
基本功能：
支持全选、反选以及全部清空。
支持按拼音筛选。
勾选省份将会勾选省份下所有城市。
支持数据回显
项目目录图
1、regions.js
export default [{
"city": [{"name": "北京市", "shortName": "北京", "id": "1101", "cityIndex": 0, "pinYin": "beijing"}],
"province": {"name": "北京市", "shortName": "北京", "id": "1100", "provinceIndex": 0, "pinYin": "beijing"}
}, {
"city": [{"name": "天津市", "shortName": "天津", "id": "1201", "cityIndex": 1, "pinYin": "tianjin"}],
"province": {"name": "天津市", "shortName": "天津", "id": "1200", "provinceIndex": 1, "pinYin": "tianjin"}
}, {
"city": [{
"name": "石家庄市",
"shortName": "石家庄",
"id": "1301",
"cityIndex": 2,
"pinYin": "shijiazhuang"
}, {"name": "唐山市", "shortName": "唐山", "id": "1302", "cityIndex": 3, "pinYin": "tangshan"}, {
"name": "秦皇岛市",
"shortName": "秦皇岛",
"id": "1303",
"cityIndex": 4,
"pinYin": "qinhuangdao"
}, {"name": "邯郸市", "shortName": "邯郸", "id": "1304", "cityIndex": 5, "pinYin": "handan"}, {
"name": "邢台市",
"shortName": "邢台",
"id": "1305",
"cityIndex": 6,
"pinYin": "xingtai"
}, {"name": "保定市", "shortName": "保定", "id": "1306", "cityIndex": 7, "pinYin": "baoding"}, {
"name": "张家口市",
"shortName": "张家口",
"id": "1307",
"cityIndex": 8,
"pinYin": "zhangjiakou"
}, {"name": "承德市", "shortName": "承德", "id": "1308", "cityIndex": 9, "pinYin": "chengde"}, {
"name": "沧州市",
"shortName": "沧州",
"id": "1309",
"cityIndex": 10,
"pinYin": "cangzhou"
}, {"name": "廊坊市", "shortName": "廊坊", "id": "1310", "cityIndex": 11, "pinYin": "langfang"}, {
"name": "衡水市",
"shortName": "衡水",
"id": "1311",
"cityIndex": 12,
"pinYin": "hengshui"
}], "province": {"name": "河北省", "shortName": "河北", "id": "1300", "provinceIndex": 2, "pinYin": "hebei"}
}, {
"city": [{"name": "太原市", "shortName": "太原", "id": "1401", "cityIndex": 13, "pinYin": "taiyuan"}, {
"name": "大同市",
"shortName": "大同",
"id": "1402",
"cityIndex": 14,
"pinYin": "datong"
}, {"name": "阳泉市", "shortName": "阳泉", "id": "1403", "cityIndex": 15, "pinYin": "yangquan"}, {
"name": "长治市",
"shortName": "长治",
"id": "1404",
"cityIndex": 16,
"pinYin": "changzhi"
}, {"name": "晋城市", "shortName": "晋城", "id": "1405", "cityIndex": 17, "pinYin": "jincheng"}, {
"name": "朔州市",
"shortName": "朔州",
"id": "1406",
"cityIndex": 18,
"pinYin": "shuozhou"
}, {"name": "晋中市", "shortName": "晋中", "id": "1407", "cityIndex": 19, "pinYin": "jinzhong"}, {
"name": "运城市",
"shortName": "运城",
"id": "1408",
"cityIndex": 20,
"pinYin": "yuncheng"
}, {"name": "忻州市", "shortName": "忻州", "id": "1409", "cityIndex": 21, "pinYin": "xinzhou"}, {
"name": "临汾市",
"shortName": "临汾",
"id": "1410",
"cityIndex": 22,
"pinYin": "linfen"
}, {"name": "吕梁市", "shortName": "吕梁", "id": "1411", "cityIndex": 23, "pinYin": "lvliang"}],
"province": {"name": "山西省", "shortName": "山西", "id": "1400", "provinceIndex": 3, "pinYin": "shanxi"}
}, {
"city": [{
"name": "呼和浩特市",
"shortName": "呼和浩特",
"id": "1501",
"cityIndex": 24,
"pinYin": "huhehaote"
}, {"name": "包头市", "shortName": "包头", "id": "1502", "cityIndex": 25, "pinYin": "baotou"}, {
"name": "乌海市",
"shortName": "乌海",
"id": "1503",
"cityIndex": 26,
"pinYin": "wuhai"
}, {"name": "赤峰市", "shortName": "赤峰", "id": "1504", "cityIndex": 27, "pinYin": "chifeng"}, {
"name": "通辽市",
"shortName": "通辽",
"id": "1505",
"cityIndex": 28,
"pinYin": "tongliao"
}, {"name": "鄂尔多斯市", "shortName": "鄂尔多斯", "id": "1506", "cityIndex": 29, "pinYin": "eerduosi"}, {
"name": "呼伦贝尔市",
"shortName": "呼伦贝尔",
"id": "1507",
"cityIndex": 30,
"pinYin": "hulunbeier"
}, {"name": "巴彦淖尔市", "shortName": "巴彦淖尔", "id": "1508", "cityIndex": 31, "pinYin": "bayannaoer"}, {
"name": "乌兰察布市",
"shortName": "乌兰察布",
"id": "1509",
"cityIndex": 32,
"pinYin": "wulanchabu"
}, {"name": "兴安盟", "shortName": "兴安盟", "id": "1522", "cityIndex": 33, "pinYin": "xinganmeng"}, {
"name": "锡林郭勒盟",
"shortName": "锡林郭勒盟",
"id": "1525",
"cityIndex": 34,
"pinYin": "xilinguoleimeng"
}, {"name": "阿拉善盟", "shortName": "阿拉善盟", "id": "1529", "cityIndex": 35, "pinYin": "alashanmeng"}],
"province": {"name": "内蒙古自治区", "shortName": "内蒙古", "id": "1500", "provinceIndex": 4, "pinYin": "neimenggu"}
}, {
"city": [{"name": "沈阳市", "shortName": "沈阳", "id": "2101", "cityIndex": 36, "pinYin": "shenyang"}, {
"name": "大连市",
"shortName": "大连",
"id": "2102",
"cityIndex": 37,
"pinYin": "dalian"
}, {"name": "鞍山市", "shortName": "鞍山", "id": "2103", "cityIndex": 38, "pinYin": "anshan"}, {
"name": "抚顺市",
"shortName": "抚顺",
"id": "2104",
"cityIndex": 39,
"pinYin": "fushun"
}, {"name": "本溪市", "shortName": "本溪", "id": "2105", "cityIndex": 40, "pinYin": "benxi"}, {
"name": "丹东市",
"shortName": "丹东",
"id": "2106",
"cityIndex": 41,
"pinYin": "dandong"
}, {"name": "锦州市", "shortName": "锦州", "id": "2107", "cityIndex": 42, "pinYin": "jinzhou"}, {
"name": "营口市",
"shortName": "营口",
"id": "2108",
"cityIndex": 43,
"pinYin": "yingkou"
}, {"name": "阜新市", "shortName": "阜新", "id": "2109", "cityIndex": 44, "pinYin": "fuxin"}, {
"name": "辽阳市",
"shortName": "辽阳",
"id": "2110",
"cityIndex": 45,
"pinYin": "liaoyang"
}, {"name": "盘锦市", "shortName": "盘锦", "id": "2111", "cityIndex": 46, "pinYin": "panjin"}, {
"name": "铁岭市",
"shortName": "铁岭",
"id": "2112",
"cityIndex": 47,
"pinYin": "tieling"
}, {"name": "朝阳市", "shortName": "朝阳", "id": "2113", "cityIndex": 48, "pinYin": "chaoyang"}, {
"name": "葫芦岛市",
"shortName": "葫芦岛",
"id": "2114",
"cityIndex": 49,
"pinYin": "huludao"
}, {"name": "金普新区", "shortName": "金普新区", "id": "2115", "cityIndex": 50, "pinYin": "jinpuxinqu"}],
"province": {"name": "辽宁省", "shortName": "辽宁", "id": "2100", "provinceIndex": 5, "pinYin": "liaoning"}
}, {
"city": [{"name": "长春市", "shortName": "长春", "id": "2201", "cityIndex": 51, "pinYin": "changchun"}, {
"name": "吉林市",
"shortName": "吉林",
"id": "2202",
"cityIndex": 52,
"pinYin": "jilin"
}, {"name": "四平市", "shortName": "四平", "id": "2203", "cityIndex": 53, "pinYin": "siping"}, {
"name": "辽源市",
"shortName": "辽源",
"id": "2204",
"cityIndex": 54,
"pinYin": "liaoyuan"
}, {"name": "通化市", "shortName": "通化", "id": "2205", "cityIndex": 55, "pinYin": "tonghua"}, {
"name": "白山市",
"shortName": "白山",
"id": "2206",
"cityIndex": 56,
"pinYin": "baishan"
}, {"name": "松原市", "shortName": "松原", "id": "2207", "cityIndex": 57, "pinYin": "songyuan"}, {
"name": "白城市",
"shortName": "白城",
"id": "2208",
"cityIndex": 58,
"pinYin": "baicheng"
}, {"name": "延边朝鲜族自治州", "shortName": "延边", "id": "2224", "cityIndex": 59, "pinYin": "yanbian"}],
"province": {"name": "吉林省", "shortName": "吉林", "id": "2200", "provinceIndex": 6, "pinYin": "jilin"}
}, {
"city": [{"name": "哈尔滨市", "shortName": "哈尔滨", "id": "2301", "cityIndex": 60, "pinYin": "haerbin"}, {
"name": "齐齐哈尔市",
"shortName": "齐齐哈尔",
"id": "2302",
"cityIndex": 61,
"pinYin": "qiqihaer"
}, {"name": "鸡西市", "shortName": "鸡西", "id": "2303", "cityIndex": 62, "pinYin": "jixi"}, {
"name": "鹤岗市",
"shortName": "鹤岗",
"id": "2304",
"cityIndex": 63,
"pinYin": "hegang"
}, {"name": "双鸭山市", "shortName": "双鸭山", "id": "2305", "cityIndex": 64, "pinYin": "shuangyashan"}, {
"name": "大庆市",
"shortName": "大庆",
"id": "2306",
"cityIndex": 65,
"pinYin": "daqing"
}, {"name": "伊春市", "shortName": "伊春", "id": "2307", "cityIndex": 66, "pinYin": "yichun"}, {
"name": "佳木斯市",
"shortName": "佳木斯",
"id": "2308",
"cityIndex": 67,
"pinYin": "jiamusi"
}, {"name": "七台河市", "shortName": "七台河", "id": "2309", "cityIndex": 68, "pinYin": "qitaihe"}, {
"name": "牡丹江市",
"shortName": "牡丹江",
"id": "2310",
"cityIndex": 69,
"pinYin": "mudanjiang"
}, {"name": "黑河市", "shortName": "黑河", "id": "2311", "cityIndex": 70, "pinYin": "heihe"}, {
"name": "绥化市",
"shortName": "绥化",
"id": "2312",
"cityIndex": 71,
"pinYin": "suihua"
}, {"name": "大兴安岭地区", "shortName": "大兴安岭", "id": "2327", "cityIndex": 72, "pinYin": "daxinganling"}],
"province": {"name": "黑龙江省", "shortName": "黑龙江", "id": "2300", "provinceIndex": 7, "pinYin": "heilongjiang"}
}, {
"city": [{"name": "上海市", "shortName": "上海", "id": "3101", "cityIndex": 73, "pinYin": "shanghai"}],
"province": {"name": "上海市", "shortName": "上海", "id": "3100", "provinceIndex": 8, "pinYin": "shanghai"}
}, {
"city": [{"name": "南京市", "shortName": "南京", "id": "3201", "cityIndex": 74, "pinYin": "nanjing"}, {
"name": "无锡市",
"shortName": "无锡",
"id": "3202",
"cityIndex": 75,
"pinYin": "wuxi"
}, {"name": "徐州市", "shortName": "徐州", "id": "3203", "cityIndex": 76, "pinYin": "xuzhou"}, {
"name": "常州市",
"shortName": "常州",
"id": "3204",
"cityIndex": 77,
"pinYin": "changzhou"
}, {"name": "苏州市", "shortName": "苏州", "id": "3205", "cityIndex": 78, "pinYin": "suzhou"}, {
"name": "南通市",
"shortName": "南通",
"id": "3206",
"cityIndex": 79,
"pinYin": "nantong"
}, {"name": "连云港市", "shortName": "连云港", "id": "3207", "cityIndex": 80, "pinYin": "lianyungang"}, {
"name": "淮安市",
"shortName": "淮安",
"id": "3208",
"cityIndex": 81,
"pinYin": "huaian"
}, {"name": "盐城市", "shortName": "盐城", "id": "3209", "cityIndex": 82, "pinYin": "yancheng"}, {
"name": "扬州市",
"shortName": "扬州",
"id": "3210",
"cityIndex": 83,
"pinYin": "yangzhou"
}, {"name": "镇江市", "shortName": "镇江", "id": "3211", "cityIndex": 84, "pinYin": "zhenjiang"}, {
"name": "泰州市",
"shortName": "泰州",
"id": "3212",
"cityIndex": 85,
"pinYin": "taizhou"
}, {"name": "宿迁市", "shortName": "宿迁", "id": "3213", "cityIndex": 86, "pinYin": "suqian"}],
"province": {"name": "江苏省", "shortName": "江苏", "id": "3200", "provinceIndex": 9, "pinYin": "jiangsu"}
}, {
"city": [{"name": "杭州市", "shortName": "杭州", "id": "3301", "cityIndex": 87, "pinYin": "hangzhou"}, {
"name": "宁波市",
"shortName": "宁波",
"id": "3302",
"cityIndex": 88,
"pinYin": "ningbo"
}, {"name": "温州市", "shortName": "温州", "id": "3303", "cityIndex": 89, "pinYin": "wenzhou"}, {
"name": "嘉兴市",
"shortName": "嘉兴",
"id": "3304",
"cityIndex": 90,
"pinYin": "jiaxing"
}, {"name": "湖州市", "shortName": "湖州", "id": "3305", "cityIndex": 91, "pinYin": "huzhou"}, {
"name": "绍兴市",
"shortName": "绍兴",
"id": "3306",
"cityIndex": 92,
"pinYin": "shaoxing"
}, {"name": "金华市", "shortName": "金华", "id": "3307", "cityIndex": 93, "pinYin": "jinhua"}, {
"name": "衢州市",
"shortName": "衢州",
"id": "3308",
"cityIndex": 94,
"pinYin": "quzhou"
}, {"name": "舟山市", "shortName": "舟山", "id": "3309", "cityIndex": 95, "pinYin": "zhoushan"}, {
"name": "台州市",
"shortName": "台州",
"id": "3310",
"cityIndex": 96,
"pinYin": "taizhou"
}, {"name": "丽水市", "shortName": "丽水", "id": "3311", "cityIndex": 97, "pinYin": "lishui"}, {
"name": "舟山群岛新区",
"shortName": "舟山新区",
"id": "3312",
"cityIndex": 98,
"pinYin": "zhoushanxinqu"
}], "province": {"name": "浙江省", "shortName": "浙江", "id": "3300", "provinceIndex": 10, "pinYin": "zhejiang"}
}, {
"city": [{"name": "合肥市", "shortName": "合肥", "id": "3401", "cityIndex": 99, "pinYin": "hefei"}, {
"name": "芜湖市",
"shortName": "芜湖",
"id": "3402",
"cityIndex": 100,
"pinYin": "wuhu"
}, {"name": "蚌埠市", "shortName": "蚌埠", "id": "3403", "cityIndex": 101, "pinYin": "bangbu"}, {
"name": "淮南市",
"shortName": "淮南",
"id": "3404",
"cityIndex": 102,
"pinYin": "huainan"
}, {"name": "马鞍山市", "shortName": "马鞍山", "id": "3405", "cityIndex": 103, "pinYin": "maanshan"}, {
"name": "淮北市",
"shortName": "淮北",
"id": "3406",
"cityIndex": 104,
"pinYin": "huaibei"
}, {"name": "铜陵市", "shortName": "铜陵", "id": "3407", "cityIndex": 105, "pinYin": "tongling"}, {
"name": "安庆市",
"shortName": "安庆",
"id": "3408",
"cityIndex": 106,
"pinYin": "anqing"
}, {"name": "黄山市", "shortName": "黄山", "id": "3410", "cityIndex": 107, "pinYin": "huangshan"}, {
"name": "滁州市",
"shortName": "滁州",
"id": "3411",
"cityIndex": 108,
"pinYin": "chuzhou"
}, {"name": "阜阳市", "shortName": "阜阳", "id": "3412", "cityIndex": 109, "pinYin": "fuyang"}, {
"name": "宿州市",
"shortName": "宿州",
"id": "3413",
"cityIndex": 110,
"pinYin": "suzhou"
}, {"name": "六安市", "shortName": "六安", "id": "3415", "cityIndex": 111, "pinYin": "liuan"}, {
"name": "亳州市",
"shortName": "亳州",
"id": "3416",
"cityIndex": 112,
"pinYin": "bozhou"
}, {"name": "池州市", "shortName": "池州", "id": "3417", "cityIndex": 113, "pinYin": "chizhou"}, {
"name": "宣城市",
"shortName": "宣城",
"id": "3418",
"cityIndex": 114,
"pinYin": "xuancheng"
}], "province": {"name": "安徽省", "shortName": "安徽", "id": "3400", "provinceIndex": 11, "pinYin": "anhui"}
}, {
"city": [{"name": "福州市", "shortName": "福州", "id": "3501", "cityIndex": 115, "pinYin": "fuzhou"}, {
"name": "厦门市",
"shortName": "厦门",
"id": "3502",
"cityIndex": 116,
"pinYin": "shamen"
}, {"name": "莆田市", "shortName": "莆田", "id": "3503", "cityIndex": 117, "pinYin": "putian"}, {
"name": "三明市",
"shortName": "三明",
"id": "3504",
"cityIndex": 118,
"pinYin": "sanming"
}, {"name": "泉州市", "shortName": "泉州", "id": "3505", "cityIndex": 119, "pinYin": "quanzhou"}, {
"name": "漳州市",
"shortName": "漳州",
"id": "3506",
"cityIndex": 120,
"pinYin": "zhangzhou"
}, {"name": "南平市", "shortName": "南平", "id": "3507", "cityIndex": 121, "pinYin": "nanping"}, {
"name": "龙岩市",
"shortName": "龙岩",
"id": "3508",
"cityIndex": 122,
"pinYin": "longyan"
}, {"name": "宁德市", "shortName": "宁德", "id": "3509", "cityIndex": 123, "pinYin": "ningde"}],
"province": {"name": "福建省", "shortName": "福建", "id": "3500", "provinceIndex": 12, "pinYin": "fujian"}
}, {
"city": [{"name": "南昌市", "shortName": "南昌", "id": "3601", "cityIndex": 124, "pinYin": "nanchang"}, {
"name": "景德镇市",
"shortName": "景德镇",
"id": "3602",
"cityIndex": 125,
"pinYin": "jingdezhen"
}, {"name": "萍乡市", "shortName": "萍乡", "id": "3603", "cityIndex": 126, "pinYin": "pingxiang"}, {
"name": "九江市",
"shortName": "九江",
"id": "3604",
"cityIndex": 127,
"pinYin": "jiujiang"
}, {"name": "新余市", "shortName": "新余", "id": "3605", "cityIndex": 128, "pinYin": "xinyu"}, {
"name": "鹰潭市",
"shortName": "鹰潭",
"id": "3606",
"cityIndex": 129,
"pinYin": "yingtan"
}, {"name": "赣州市", "shortName": "赣州", "id": "3607", "cityIndex": 130, "pinYin": "ganzhou"}, {
"name": "吉安市",
"shortName": "吉安",
"id": "3608",
"cityIndex": 131,
"pinYin": "jian"
}, {"name": "宜春市", "shortName": "宜春", "id": "3609", "cityIndex": 132, "pinYin": "yichun"}, {
"name": "抚州市",
"shortName": "抚州",
"id": "3610",
"cityIndex": 133,
"pinYin": "fuzhou"
}, {"name": "上饶市", "shortName": "上饶", "id": "3611", "cityIndex": 134, "pinYin": "shangrao"}],
"province": {"name": "江西省", "shortName": "江西", "id": "3600", "provinceIndex": 13, "pinYin": "jiangxi"}
}, {
"city": [{"name": "济南市", "shortName": "济南", "id": "3701", "cityIndex": 135, "pinYin": "jinan"}, {
"name": "青岛市",
"shortName": "青岛",
"id": "3702",
"cityIndex": 136,
"pinYin": "qingdao"
}, {"name": "淄博市", "shortName": "淄博", "id": "3703", "cityIndex": 137, "pinYin": "zibo"}, {
"name": "枣庄市",
"shortName": "枣庄",
"id": "3704",
"cityIndex": 138,
"pinYin": "zaozhuang"
}, {"name": "东营市", "shortName": "东营", "id": "3705", "cityIndex": 139, "pinYin": "dongying"}, {
"name": "烟台市",
"shortName": "烟台",
"id": "3706",
"cityIndex": 140,
"pinYin": "yantai"
}, {"name": "潍坊市", "shortName": "潍坊", "id": "3707", "cityIndex": 141, "pinYin": "weifang"}, {
"name": "济宁市",
"shortName": "济宁",
"id": "3708",
"cityIndex": 142,
"pinYin": "jining"
}, {"name": "泰安市", "shortName": "泰安", "id": "3709", "cityIndex": 143, "pinYin": "taian"}, {
"name": "威海市",
"shortName": "威海",
"id": "3710",
"cityIndex": 144,
"pinYin": "weihai"
}, {"name": "日照市", "shortName": "日照", "id": "3711", "cityIndex": 145, "pinYin": "rizhao"}, {
"name": "莱芜市",
"shortName": "莱芜",
"id": "3712",
"cityIndex": 146,
"pinYin": "laiwu"
}, {"name": "临沂市", "shortName": "临沂", "id": "3713", "cityIndex": 147, "pinYin": "linyi"}, {
"name": "德州市",
"shortName": "德州",
"id": "3714",
"cityIndex": 148,
"pinYin": "dezhou"
}, {"name": "聊城市", "shortName": "聊城", "id": "3715", "cityIndex": 149, "pinYin": "liaocheng"}, {
"name": "滨州市",
"shortName": "滨州",
"id": "3716",
"cityIndex": 150,
"pinYin": "binzhou"
}, {"name": "菏泽市", "shortName": "菏泽", "id": "3717", "cityIndex": 151, "pinYin": "heze"}],
"province": {"name": "山东省", "shortName": "山东", "id": "3700", "provinceIndex": 14, "pinYin": "shandong"}
}, {
"city": [{"name": "郑州市", "shortName": "郑州", "id": "4101", "cityIndex": 152, "pinYin": "zhengzhou"}, {
"name": "开封市",
"shortName": "开封",
"id": "4102",
"cityIndex": 153,
"pinYin": "kaifeng"
}, {"name": "洛阳市", "shortName": "洛阳", "id": "4103", "cityIndex": 154, "pinYin": "luoyang"}, {
"name": "平顶山市",
"shortName": "平顶山",
"id": "4104",
"cityIndex": 155,
"pinYin": "pingdingshan"
}, {"name": "安阳市", "shortName": "安阳", "id": "4105", "cityIndex": 156, "pinYin": "anyang"}, {
"name": "鹤壁市",
"shortName": "鹤壁",
"id": "4106",
"cityIndex": 157,
"pinYin": "hebi"
}, {"name": "新乡市", "shortName": "新乡", "id": "4107", "cityIndex": 158, "pinYin": "xinxiang"}, {
"name": "焦作市",
"shortName": "焦作",
"id": "4108",
"cityIndex": 159,
"pinYin": "jiaozuo"
}, {"name": "濮阳市", "shortName": "濮阳", "id": "4109", "cityIndex": 160, "pinYin": "puyang"}, {
"name": "许昌市",
"shortName": "许昌",
"id": "4110",
"cityIndex": 161,
"pinYin": "xuchang"
}, {"name": "漯河市", "shortName": "漯河", "id": "4111", "cityIndex": 162, "pinYin": "luohe"}, {
"name": "三门峡市",
"shortName": "三门峡",
"id": "4112",
"cityIndex": 163,
"pinYin": "sanmenxia"
}, {"name": "南阳市", "shortName": "南阳", "id": "4113", "cityIndex": 164, "pinYin": "nanyang"}, {
"name": "商丘市",
"shortName": "商丘",
"id": "4114",
"cityIndex": 165,
"pinYin": "shangqiu"
}, {"name": "信阳市", "shortName": "信阳", "id": "4115", "cityIndex": 166, "pinYin": "xinyang"}, {
"name": "周口市",
"shortName": "周口",
"id": "4116",
"cityIndex": 167,
"pinYin": "zhoukou"
}, {"name": "驻马店市", "shortName": "驻马店", "id": "4117", "cityIndex": 168, "pinYin": "zhumadian"}, {
"name": "直辖县级",
"shortName": "直辖县",
"id": "4190",
"cityIndex": 169,
"pinYin": "zhixiaxian"
}], "province": {"name": "河南省", "shortName": "河南", "id": "4100", "provinceIndex": 15, "pinYin": "henan"}
}, {
"city": [{"name": "武汉市", "shortName": "武汉", "id": "4201", "cityIndex": 170, "pinYin": "wuhan"}, {
"name": "黄石市",
"shortName": "黄石",
"id": "4202",
"cityIndex": 171,
"pinYin": "huangshi"
}, {"name": "十堰市", "shortName": "十堰", "id": "4203", "cityIndex": 172, "pinYin": "shiyan"}, {
"name": "宜昌市",
"shortName": "宜昌",
"id": "4205",
"cityIndex": 173,
"pinYin": "yichang"
}, {"name": "襄阳市", "shortName": "襄阳", "id": "4206", "cityIndex": 174, "pinYin": "xiangyang"}, {
"name": "鄂州市",
"shortName": "鄂州",
"id": "4207",
"cityIndex": 175,
"pinYin": "ezhou"
}, {"name": "荆门市", "shortName": "荆门", "id": "4208", "cityIndex": 176, "pinYin": "jingmen"}, {
"name": "孝感市",
"shortName": "孝感",
"id": "4209",
"cityIndex": 177,
"pinYin": "xiaogan"
}, {"name": "荆州市", "shortName": "荆州", "id": "4210", "cityIndex": 178, "pinYin": "jingzhou"}, {
"name": "黄冈市",
"shortName": "黄冈",
"id": "4211",
"cityIndex": 179,
"pinYin": "huanggang"
}, {"name": "咸宁市", "shortName": "咸宁", "id": "4212", "cityIndex": 180, "pinYin": "xianning"}, {
"name": "随州市",
"shortName": "随州",
"id": "4213",
"cityIndex": 181,
"pinYin": "suizhou"
}, {"name": "恩施土家族苗族自治州", "shortName": "恩施", "id": "4228", "cityIndex": 182, "pinYin": "enshi"}, {
"name": "直辖县级",
"shortName": "直辖县",
"id": "4290",
"cityIndex": 183,
"pinYin": "zhixiaxian"
}, {"name": "仙桃市", "shortName": "仙桃", "id": "4290", "cityIndex": 184, "pinYin": "xiantao"}, {
"name": "潜江市",
"shortName": "潜江",
"id": "4290",
"cityIndex": 185,
"pinYin": "qianjiang"
}, {"name": "天门市", "shortName": "天门市", "id": "4290", "cityIndex": 186, "pinYin": "tianmenshi"}, {
"name": "神农架林区",
"shortName": "神农架",
"id": "4290",
"cityIndex": 187,
"pinYin": "shennongjia"
}], "province": {"name": "湖北省", "shortName": "湖北", "id": "4200", "provinceIndex": 16, "pinYin": "hubei"}
}, {
"city": [{"name": "长沙市", "shortName": "长沙", "id": "4301", "cityIndex": 188, "pinYin": "changsha"}, {
"name": "株洲市",
"shortName": "株洲",
"id": "4302",
"cityIndex": 189,
"pinYin": "zhuzhou"
}, {"name": "湘潭市", "shortName": "湘潭", "id": "4303", "cityIndex": 190, "pinYin": "xiangtan"}, {
"name": "衡阳市",
"shortName": "衡阳",
"id": "4304",
"cityIndex": 191,
"pinYin": "hengyang"
}, {"name": "邵阳市", "shortName": "邵阳", "id": "4305", "cityIndex": 192, "pinYin": "shaoyang"}, {
"name": "岳阳市",
"shortName": "岳阳",
"id": "4306",
"cityIndex": 193,
"pinYin": "yueyang"
}, {"name": "常德市", "shortName": "常德", "id": "4307", "cityIndex": 194, "pinYin": "changde"}, {
"name": "张家界市",
"shortName": "张家界",
"id": "4308",
"cityIndex": 195,
"pinYin": "zhangjiajie"
}, {"name": "益阳市", "shortName": "益阳", "id": "4309", "cityIndex": 196, "pinYin": "yiyang"}, {
"name": "郴州市",
"shortName": "郴州",
"id": "4310",
"cityIndex": 197,
"pinYin": "chenzhou"
}, {"name": "永州市", "shortName": "永州", "id": "4311", "cityIndex": 198, "pinYin": "yongzhou"}, {
"name": "怀化市",
"shortName": "怀化",
"id": "4312",
"cityIndex": 199,
"pinYin": "huaihua"
}, {"name": "娄底市", "shortName": "娄底", "id": "4313", "cityIndex": 200, "pinYin": "loudi"}, {
"name": "湘西土家族苗族自治州",
"shortName": "湘西",
"id": "4331",
"cityIndex": 201,
"pinYin": "xiangxi"
}], "province": {"name": "湖南省", "shortName": "湖南", "id": "4300", "provinceIndex": 17, "pinYin": "hunan"}
}, {
"city": [{"name": "广州市", "shortName": "广州", "id": "4401", "cityIndex": 202, "pinYin": "guangzhou"}, {
"name": "韶关市",
"shortName": "韶关",
"id": "4402",
"cityIndex": 203,
"pinYin": "shaoguan"
}, {"name": "深圳市", "shortName": "深圳", "id": "4403", "cityIndex": 204, "pinYin": "shenzhen"}, {
"name": "珠海市",
"shortName": "珠海",
"id": "4404",
"cityIndex": 205,
"pinYin": "zhuhai"
}, {"name": "汕头市", "shortName": "汕头", "id": "4405", "cityIndex": 206, "pinYin": "shantou"}, {
"name": "佛山市",
"shortName": "佛山",
"id": "4406",
"cityIndex": 207,
"pinYin": "fushan"
}, {"name": "江门市", "shortName": "江门", "id": "4407", "cityIndex": 208, "pinYin": "jiangmen"}, {
"name": "湛江市",
"shortName": "湛江",
"id": "4408",
"cityIndex": 209,
"pinYin": "zhanjiang"
}, {"name": "茂名市", "shortName": "茂名", "id": "4409", "cityIndex": 210, "pinYin": "maoming"}, {
"name": "肇庆市",
"shortName": "肇庆",
"id": "4412",
"cityIndex": 211,
"pinYin": "zhaoqing"
}, {"name": "惠州市", "shortName": "惠州", "id": "4413", "cityIndex": 212, "pinYin": "huizhou"}, {
"name": "梅州市",
"shortName": "梅州",
"id": "4414",
"cityIndex": 213,
"pinYin": "meizhou"
}, {"name": "汕尾市", "shortName": "汕尾", "id": "4415", "cityIndex": 214, "pinYin": "shanwei"}, {
"name": "河源市",
"shortName": "河源",
"id": "4416",
"cityIndex": 215,
"pinYin": "heyuan"
}, {"name": "阳江市", "shortName": "阳江", "id": "4417", "cityIndex": 216, "pinYin": "yangjiang"}, {
"name": "清远市",
"shortName": "清远",
"id": "4418",
"cityIndex": 217,
"pinYin": "qingyuan"
}, {"name": "东莞市", "shortName": "东莞", "id": "4419", "cityIndex": 218, "pinYin": "dongguan"}, {
"name": "中山市",
"shortName": "中山",
"id": "4420",
"cityIndex": 219,
"pinYin": "zhongshan"
}, {"name": "潮州市", "shortName": "潮州", "id": "4451", "cityIndex": 220, "pinYin": "chaozhou"}, {
"name": "揭阳市",
"shortName": "揭阳",
"id": "4452",
"cityIndex": 221,
"pinYin": "jieyang"
}, {"name": "云浮市", "shortName": "云浮", "id": "4453", "cityIndex": 222, "pinYin": "yunfu"}],
"province": {"name": "广东省", "shortName": "广东", "id": "4400", "provinceIndex": 18, "pinYin": "guangdong"}
}, {
"city": [{"name": "南宁市", "shortName": "南宁", "id": "4501", "cityIndex": 223, "pinYin": "nanning"}, {
"name": "柳州市",
"shortName": "柳州",
"id": "4502",
"cityIndex": 224,
"pinYin": "liuzhou"
}, {"name": "桂林市", "shortName": "桂林", "id": "4503", "cityIndex": 225, "pinYin": "guilin"}, {
"name": "梧州市",
"shortName": "梧州",
"id": "4504",
"cityIndex": 226,
"pinYin": "wuzhou"
}, {"name": "北海市", "shortName": "北海", "id": "4505", "cityIndex": 227, "pinYin": "beihai"}, {
"name": "防城港市",
"shortName": "防城港",
"id": "4506",
"cityIndex": 228,
"pinYin": "fangchenggang"
}, {"name": "钦州市", "shortName": "钦州", "id": "4507", "cityIndex": 229, "pinYin": "qinzhou"}, {
"name": "贵港市",
"shortName": "贵港",
"id": "4508",
"cityIndex": 230,
"pinYin": "guigang"
}, {"name": "玉林市", "shortName": "玉林", "id": "4509", "cityIndex": 231, "pinYin": "yulin"}, {
"name": "百色市",
"shortName": "百色",
"id": "4510",
"cityIndex": 232,
"pinYin": "baise"
}, {"name": "贺州市", "shortName": "贺州", "id": "4511", "cityIndex": 233, "pinYin": "hezhou"}, {
"name": "河池市",
"shortName": "河池",
"id": "4512",
"cityIndex": 234,
"pinYin": "hechi"
}, {"name": "来宾市", "shortName": "来宾", "id": "4513", "cityIndex": 235, "pinYin": "laibin"}, {
"name": "崇左市",
"shortName": "崇左",
"id": "4514",
"cityIndex": 236,
"pinYin": "chongzuo"
}], "province": {"name": "广西壮族自治区", "shortName": "广西", "id": "4500", "provinceIndex": 19, "pinYin": "guangxi"}
}, {
"city": [{"name": "海口市", "shortName": "海口", "id": "4601", "cityIndex": 237, "pinYin": "haikou"}, {
"name": "三亚市",
"shortName": "三亚",
"id": "4602",
"cityIndex": 238,
"pinYin": "sanya"
}, {"name": "三沙市", "shortName": "三沙", "id": "4603", "cityIndex": 239, "pinYin": "sansha"}, {
"name": "直辖县级",
"shortName": "直辖县",
"id": "4690",
"cityIndex": 240,
"pinYin": "zhixiaxian"
}], "province": {"name": "海南省", "shortName": "海南", "id": "4600", "provinceIndex": 20, "pinYin": "hainan"}
}, {
"city": [{"name": "重庆市", "shortName": "重庆", "id": "5001", "cityIndex": 241, "pinYin": "zhongqing"}, {
"name": "两江新区",
"shortName": "两江新区",
"id": "5003",
"cityIndex": 242,
"pinYin": "liangjiangxinqu"
}], "province": {"name": "重庆市", "shortName": "重庆", "id": "5000", "provinceIndex": 21, "pinYin": "zhongqing"}
}, {
"city": [{"name": "成都市", "shortName": "成都", "id": "5101", "cityIndex": 243, "pinYin": "chengdou"}, {
"name": "自贡市",
"shortName": "自贡",
"id": "5103",
"cityIndex": 244,
"pinYin": "zigong"
}, {"name": "攀枝花市", "shortName": "攀枝花", "id": "5104", "cityIndex": 245, "pinYin": "panzhihua"}, {
"name": "泸州市",
"shortName": "泸州",
"id": "5105",
"cityIndex": 246,
"pinYin": "luzhou"
}, {"name": "德阳市", "shortName": "德阳", "id": "5106", "cityIndex": 247, "pinYin": "deyang"}, {
"name": "绵阳市",
"shortName": "绵阳",
"id": "5107",
"cityIndex": 248,
"pinYin": "mianyang"
}, {"name": "广元市", "shortName": "广元", "id": "5108", "cityIndex": 249, "pinYin": "guangyuan"}, {
"name": "遂宁市",
"shortName": "遂宁",
"id": "5109",
"cityIndex": 250,
"pinYin": "suining"
}, {"name": "内江市", "shortName": "内江", "id": "5110", "cityIndex": 251, "pinYin": "neijiang"}, {
"name": "乐山市",
"shortName": "乐山",
"id": "5111",
"cityIndex": 252,
"pinYin": "leshan"
}, {"name": "南充市", "shortName": "南充", "id": "5113", "cityIndex": 253, "pinYin": "nanchong"}, {
"name": "眉山市",
"shortName": "眉山",
"id": "5114",
"cityIndex": 254,
"pinYin": "meishan"
}, {"name": "宜宾市", "shortName": "宜宾", "id": "5115", "cityIndex": 255, "pinYin": "yibin"}, {
"name": "广安市",
"shortName": "广安",
"id": "5116",
"cityIndex": 256,
"pinYin": "guangan"
}, {"name": "达州市", "shortName": "达州", "id": "5117", "cityIndex": 257, "pinYin": "dazhou"}, {
"name": "雅安市",
"shortName": "雅安",
"id": "5118",
"cityIndex": 258,
"pinYin": "yaan"
}, {"name": "巴中市", "shortName": "巴中", "id": "5119", "cityIndex": 259, "pinYin": "bazhong"}, {
"name": "资阳市",
"shortName": "资阳",
"id": "5120",
"cityIndex": 260,
"pinYin": "ziyang"
}, {"name": "阿坝藏族羌族自治州", "shortName": "阿坝", "id": "5132", "cityIndex": 261, "pinYin": "aba"}, {
"name": "甘孜藏族自治州",
"shortName": "甘孜",
"id": "5133",
"cityIndex": 262,
"pinYin": "ganzi"
}, {"name": "凉山彝族自治州", "shortName": "凉山", "id": "5134", "cityIndex": 263, "pinYin": "liangshan"}],
"province": {"name": "四川省", "shortName": "四川", "id": "5100", "provinceIndex": 22, "pinYin": "sichuan"}
}, {
"city": [{"name": "贵阳市", "shortName": "贵阳", "id": "5201", "cityIndex": 264, "pinYin": "guiyang"}, {
"name": "六盘水市",
"shortName": "六盘水",
"id": "5202",
"cityIndex": 265,
"pinYin": "liupanshui"
}, {"name": "遵义市", "shortName": "遵义", "id": "5203", "cityIndex": 266, "pinYin": "zunyi"}, {
"name": "安顺市",
"shortName": "安顺",
"id": "5204",
"cityIndex": 267,
"pinYin": "anshun"
}, {"name": "毕节市", "shortName": "毕节", "id": "5205", "cityIndex": 268, "pinYin": "bijie"}, {
"name": "铜仁市",
"shortName": "铜仁",
"id": "5206",
"cityIndex": 269,
"pinYin": "tongren"
}, {
"name": "黔西南布依族苗族自治州",
"shortName": "黔西南",
"id": "5223",
"cityIndex": 270,
"pinYin": "qianxinan"
}, {
"name": "黔东南苗族侗族自治州",
"shortName": "黔东南",
"id": "5226",
"cityIndex": 271,
"pinYin": "qiandongnan"
}, {"name": "黔南布依族苗族自治州", "shortName": "黔南", "id": "5227", "cityIndex": 272, "pinYin": "qiannan"}],
"province": {"name": "贵州省", "shortName": "贵州", "id": "5200", "provinceIndex": 23, "pinYin": "guizhou"}
}, {
"city": [{"name": "昆明市", "shortName": "昆明", "id": "5301", "cityIndex": 273, "pinYin": "kunming"}, {
"name": "曲靖市",
"shortName": "曲靖",
"id": "5303",
"cityIndex": 274,
"pinYin": "qujing"
}, {"name": "玉溪市", "shortName": "玉溪", "id": "5304", "cityIndex": 275, "pinYin": "yuxi"}, {
"name": "保山市",
"shortName": "保山",
"id": "5305",
"cityIndex": 276,
"pinYin": "baoshan"
}, {"name": "昭通市", "shortName": "昭通", "id": "5306", "cityIndex": 277, "pinYin": "zhaotong"}, {
"name": "丽江市",
"shortName": "丽江",
"id": "5307",
"cityIndex": 278,
"pinYin": "lijiang"
}, {"name": "普洱市", "shortName": "普洱", "id": "5308", "cityIndex": 279, "pinYin": "puer"}, {
"name": "临沧市",
"shortName": "临沧",
"id": "5309",
"cityIndex": 280,
"pinYin": "lincang"
}, {
"name": "楚雄彝族自治州",
"shortName": "楚雄",
"id": "5323",
"cityIndex": 281,
"pinYin": "chuxiong"
}, {
"name": "红河哈尼族彝族自治州",
"shortName": "红河",
"id": "5325",
"cityIndex": 282,
"pinYin": "honghe"
}, {
"name": "文山壮族苗族自治州",
"shortName": "文山",
"id": "5326",
"cityIndex": 283,
"pinYin": "wenshan"
}, {
"name": "西双版纳傣族自治州",
"shortName": "西双版纳",
"id": "5328",
"cityIndex": 284,
"pinYin": "xishuangbanna"
}, {"name": "大理白族自治州", "shortName": "大理", "id": "5329", "cityIndex": 285, "pinYin": "dali"}, {
"name": "德宏傣族景颇族自治州",
"shortName": "德宏",
"id": "5331",
"cityIndex": 286,
"pinYin": "dehong"
}, {"name": "怒江傈僳族自治州", "shortName": "怒江", "id": "5333", "cityIndex": 287, "pinYin": "nujiang"}, {
"name": "迪庆藏族自治州",
"shortName": "迪庆",
"id": "5334",
"cityIndex": 288,
"pinYin": "diqing"
}], "province": {"name": "云南省", "shortName": "云南", "id": "5300", "provinceIndex": 24, "pinYin": "yunnan"}
}, {
"city": [{"name": "拉萨市", "shortName": "拉萨", "id": "5401", "cityIndex": 289, "pinYin": "lasa"}, {
"name": "日喀则市",
"shortName": "日喀则",
"id": "5402",
"cityIndex": 290,
"pinYin": "rikaze"
}, {"name": "昌都市", "shortName": "昌都", "id": "5403", "cityIndex": 291, "pinYin": "changdou"}, {
"name": "山南地区",
"shortName": "山南",
"id": "5422",
"cityIndex": 292,
"pinYin": "shannan"
}, {"name": "那曲地区", "shortName": "那曲", "id": "5424", "cityIndex": 293, "pinYin": "naqu"}, {
"name": "阿里地区",
"shortName": "阿里",
"id": "5425",
"cityIndex": 294,
"pinYin": "ali"
}, {"name": "林芝地区", "shortName": "林芝", "id": "5426", "cityIndex": 295, "pinYin": "linzhi"}],
"province": {"name": "西藏自治区", "shortName": "西藏", "id": "5400", "provinceIndex": 25, "pinYin": "xicang"}
}, {
"city": [{"name": "西安市", "shortName": "西安", "id": "6101", "cityIndex": 296, "pinYin": "xian"}, {
"name": "铜川市",
"shortName": "铜川",
"id": "6102",
"cityIndex": 297,
"pinYin": "tongchuan"
}, {"name": "宝鸡市", "shortName": "宝鸡", "id": "6103", "cityIndex": 298, "pinYin": "baoji"}, {
"name": "咸阳市",
"shortName": "咸阳",
"id": "6104",
"cityIndex": 299,
"pinYin": "xianyang"
}, {"name": "渭南市", "shortName": "渭南", "id": "6105", "cityIndex": 300, "pinYin": "weinan"}, {
"name": "延安市",
"shortName": "延安",
"id": "6106",
"cityIndex": 301,
"pinYin": "yanan"
}, {"name": "汉中市", "shortName": "汉中", "id": "6107", "cityIndex": 302, "pinYin": "hanzhong"}, {
"name": "榆林市",
"shortName": "榆林",
"id": "6108",
"cityIndex": 303,
"pinYin": "yulin"
}, {"name": "安康市", "shortName": "安康", "id": "6109", "cityIndex": 304, "pinYin": "ankang"}, {
"name": "商洛市",
"shortName": "商洛",
"id": "6110",
"cityIndex": 305,
"pinYin": "shangluo"
}, {"name": "西咸新区", "shortName": "西咸", "id": "6111", "cityIndex": 306, "pinYin": "xixian"}],
"province": {"name": "陕西省", "shortName": "陕西", "id": "6100", "provinceIndex": 26, "pinYin": "shanxi"}
}, {
"city": [{"name": "兰州市", "shortName": "兰州", "id": "6201", "cityIndex": 307, "pinYin": "lanzhou"}, {
"name": "嘉峪关市",
"shortName": "嘉峪关",
"id": "6202",
"cityIndex": 308,
"pinYin": "jiayuguan"
}, {"name": "金昌市", "shortName": "金昌", "id": "6203", "cityIndex": 309, "pinYin": "jinchang"}, {
"name": "白银市",
"shortName": "白银",
"id": "6204",
"cityIndex": 310,
"pinYin": "baiyin"
}, {"name": "天水市", "shortName": "天水", "id": "6205", "cityIndex": 311, "pinYin": "tianshui"}, {
"name": "武威市",
"shortName": "武威",
"id": "6206",
"cityIndex": 312,
"pinYin": "wuwei"
}, {"name": "张掖市", "shortName": "张掖", "id": "6207", "cityIndex": 313, "pinYin": "zhangye"}, {
"name": "平凉市",
"shortName": "平凉",
"id": "6208",
"cityIndex": 314,
"pinYin": "pingliang"
}, {"name": "酒泉市", "shortName": "酒泉", "id": "6209", "cityIndex": 315, "pinYin": "jiuquan"}, {
"name": "庆阳市",
"shortName": "庆阳",
"id": "6210",
"cityIndex": 316,
"pinYin": "qingyang"
}, {"name": "定西市", "shortName": "定西", "id": "6211", "cityIndex": 317, "pinYin": "dingxi"}, {
"name": "陇南市",
"shortName": "陇南",
"id": "6212",
"cityIndex": 318,
"pinYin": "longnan"
}, {"name": "临夏回族自治州", "shortName": "临夏", "id": "6229", "cityIndex": 319, "pinYin": "linxia"}, {
"name": "甘南藏族自治州",
"shortName": "甘南",
"id": "6230",
"cityIndex": 320,
"pinYin": "gannan"
}], "province": {"name": "甘肃省", "shortName": "甘肃", "id": "6200", "provinceIndex": 27, "pinYin": "gansu"}
}, {
"city": [{"name": "西宁市", "shortName": "西宁", "id": "6301", "cityIndex": 321, "pinYin": "xining"}, {
"name": "海东市",
"shortName": "海东",
"id": "6302",
"cityIndex": 322,
"pinYin": "haidong"
}, {"name": "海北藏族自治州", "shortName": "海北", "id": "6322", "cityIndex": 323, "pinYin": "haibei"}, {
"name": "黄南藏族自治州",
"shortName": "黄南",
"id": "6323",
"cityIndex": 324,
"pinYin": "huangnan"
}, {"name": "海南藏族自治州", "shortName": "海南", "id": "6325", "cityIndex": 325, "pinYin": "hainan"}, {
"name": "果洛藏族自治州",
"shortName": "果洛",
"id": "6326",
"cityIndex": 326,
"pinYin": "guoluo"
}, {"name": "玉树藏族自治州", "shortName": "玉树", "id": "6327", "cityIndex": 327, "pinYin": "yushu"}, {
"name": "海西蒙古族藏族自治州",
"shortName": "海西",
"id": "6328",
"cityIndex": 328,
"pinYin": "haixi"
}], "province": {"name": "青海省", "shortName": "青海", "id": "6300", "provinceIndex": 28, "pinYin": "qinghai"}
}, {
"city": [{"name": "银川市", "shortName": "银川", "id": "6401", "cityIndex": 329, "pinYin": "yinchuan"}, {
"name": "石嘴山市",
"shortName": "石嘴山",
"id": "6402",
"cityIndex": 330,
"pinYin": "shizuishan"
}, {"name": "吴忠市", "shortName": "吴忠", "id": "6403", "cityIndex": 331, "pinYin": "wuzhong"}, {
"name": "固原市",
"shortName": "固原",
"id": "6404",
"cityIndex": 332,
"pinYin": "guyuan"
}, {"name": "中卫市", "shortName": "中卫", "id": "6405", "cityIndex": 333, "pinYin": "zhongwei"}],
"province": {"name": "宁夏回族自治区", "shortName": "宁夏", "id": "6400", "provinceIndex": 29, "pinYin": "ningxia"}
}, {
"city": [{
"name": "乌鲁木齐市",
"shortName": "乌鲁木齐",
"id": "6501",
"cityIndex": 334,
"pinYin": "wulumuqi"
}, {"name": "克拉玛依市", "shortName": "克拉玛依", "id": "6502", "cityIndex": 335, "pinYin": "kelamayi"}, {
"name": "吐鲁番地区",
"shortName": "吐鲁番",
"id": "6521",
"cityIndex": 336,
"pinYin": "tulufan"
}, {"name": "哈密地区", "shortName": "哈密", "id": "6522", "cityIndex": 337, "pinYin": "hami"}, {
"name": "昌吉回族自治州",
"shortName": "昌吉",
"id": "6523",
"cityIndex": 338,
"pinYin": "changji"
}, {
"name": "博尔塔拉蒙古自治州",
"shortName": "博尔塔拉",
"id": "6527",
"cityIndex": 339,
"pinYin": "boertala"
}, {
"name": "巴音郭楞蒙古自治州",
"shortName": "巴音郭楞",
"id": "6528",
"cityIndex": 340,
"pinYin": "bayinguoleng"
}, {"name": "阿克苏地区", "shortName": "阿克苏", "id": "6529", "cityIndex": 341, "pinYin": "akesu"}, {
"name": "克孜勒苏柯尔克孜自治州",
"shortName": "克孜勒苏",
"id": "6530",
"cityIndex": 342,
"pinYin": "kezileisu"
}, {"name": "喀什地区", "shortName": "喀什", "id": "6531", "cityIndex": 343, "pinYin": "kashen"}, {
"name": "和田地区",
"shortName": "和田",
"id": "6532",
"cityIndex": 344,
"pinYin": "hetian"
}, {"name": "伊犁哈萨克自治州", "shortName": "伊犁", "id": "6540", "cityIndex": 345, "pinYin": "yili"}, {
"name": "塔城地区",
"shortName": "塔城",
"id": "6542",
"cityIndex": 346,
"pinYin": "tacheng"
}, {"name": "阿勒泰地区", "shortName": "阿勒泰", "id": "6543", "cityIndex": 347, "pinYin": "aleitai"}, {
"name": "直辖县级",
"shortName": "直辖县",
"id": "6590",
"cityIndex": 348,
"pinYin": "zhixiaxian"
}], "province": {"name": "新疆维吾尔自治区", "shortName": "新疆", "id": "6500", "provinceIndex": 30, "pinYin": "xinjiang"}
}, {
"city": [{"name": "台北市", "shortName": "台北", "id": "7101", "cityIndex": 349, "pinYin": "taibei"}, {
"name": "高雄市",
"shortName": "高雄",
"id": "7102",
"cityIndex": 350,
"pinYin": "gaoxiong"
}, {"name": "基隆市", "shortName": "基隆", "id": "7103", "cityIndex": 351, "pinYin": "jilong"}, {
"name": "台中市",
"shortName": "台中",
"id": "7104",
"cityIndex": 352,
"pinYin": "taizhong"
}, {"name": "台南市", "shortName": "台南", "id": "7105", "cityIndex": 353, "pinYin": "tainan"}, {
"name": "新竹市",
"shortName": "新竹",
"id": "7106",
"cityIndex": 354,
"pinYin": "xinzhu"
}, {"name": "嘉义市", "shortName": "嘉义", "id": "7107", "cityIndex": 355, "pinYin": "jiayi"}, {
"name": "新北市",
"shortName": "新北",
"id": "7108",
"cityIndex": 356,
"pinYin": "xinbei"
}, {"name": "宜兰县", "shortName": "宜兰", "id": "7122", "cityIndex": 357, "pinYin": "yilan"}, {
"name": "桃园县",
"shortName": "桃园",
"id": "7123",
"cityIndex": 358,
"pinYin": "taoyuan"
}, {"name": "新竹县", "shortName": "新竹", "id": "7124", "cityIndex": 359, "pinYin": "xinzhu"}, {
"name": "苗栗县",
"shortName": "苗栗",
"id": "7125",
"cityIndex": 360,
"pinYin": "miaoli"
}, {"name": "彰化县", "shortName": "彰化", "id": "7127", "cityIndex": 361, "pinYin": "zhanghua"}, {
"name": "南投县",
"shortName": "南投",
"id": "7128",
"cityIndex": 362,
"pinYin": "nantou"
}, {"name": "云林县", "shortName": "云林", "id": "7129", "cityIndex": 363, "pinYin": "yunlin"}, {
"name": "嘉义县",
"shortName": "嘉义",
"id": "7130",
"cityIndex": 364,
"pinYin": "jiayi"
}, {"name": "屏东县", "shortName": "屏东", "id": "7133", "cityIndex": 365, "pinYin": "pingdong"}, {
"name": "台东县",
"shortName": "台东",
"id": "7134",
"cityIndex": 366,
"pinYin": "taidong"
}, {"name": "花莲县", "shortName": "花莲", "id": "7135", "cityIndex": 367, "pinYin": "hualian"}, {
"name": "澎湖县",
"shortName": "澎湖",
"id": "7136",
"cityIndex": 368,
"pinYin": "penghu"
}, {"name": "金门县", "shortName": "金门", "id": "7137", "cityIndex": 369, "pinYin": "jinmen"}, {
"name": "连江县",
"shortName": "连江",
"id": "7138",
"cityIndex": 370,
"pinYin": "lianjiang"
}], "province": {"name": "台湾省", "shortName": "台湾", "id": "7100", "provinceIndex": 31, "pinYin": "taiwan"}
}, {
"city": [{
"name": "香港岛",
"shortName": "香港岛",
"id": "8101",
"cityIndex": 371,
"pinYin": "xianggangdao"
}, {"name": "九龙", "shortName": "九龙", "id": "8102", "cityIndex": 372, "pinYin": "jiulong"}, {
"name": "新界",
"shortName": "新界",
"id": "8103",
"cityIndex": 373,
"pinYin": "xinjie"
}], "province": {"name": "香港特别行政区", "shortName": "香港", "id": "8100", "provinceIndex": 32, "pinYin": "xianggang"}
}, {
"city": [{
"name": "澳门半岛",
"shortName": "澳门半岛",
"cityIndex": 374,
"id": "8201",
"pinYin": "aomenbandao"
}, {"name": "氹仔岛", "shortName": "氹仔岛", "cityIndex": 375, "id": "8202", "pinYin": "dangzaidao"}, {
"name": "路环岛",
"shortName": "路环岛",
"cityIndex": 376,
"id": "8203",
"pinYin": "luhuandao"
}], "province": {"name": "澳门特别行政区", "shortName": "澳门", "id": "8200", "provinceIndex": 33, "pinYin": "aomen"}
}]
2、index.js
import RegionPicker from './region-picker'
RegionPicker.install = Vue => Vue.component(RegionPicker.name, RegionPicker)
export default RegionPicker
3、picker.scss
.outer {
.input-area {
position: relative;
}
.input-close {
position: absolute;
right: 0;
top: 8px;
width: 32px;
height: 32px;
opacity: 0.3;
cursor: pointer;
transition: 0.3s all;
}
.input-close:hover {
opacity: 1;
}
.input-close:before,
.input-close:after {
position: absolute;
left: 15px;
content: " ";
height: 14px;
width: 2px;
background-color: #333;
}
.input-close:before {
transform: rotate(45deg);
}
.input-close:after {
transform: rotate(-45deg);
}
}
.picker-bg {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
outline: 0;
background: #000000a1;
z-index: 9999;
.picker {
width: 50%;
height: 600px;
position: absolute;
left: 0;
right: 0;
margin: 4% auto;
overflow: scroll;
background-color: #fff;
border-radius: 8px;
line-height: 13px;
z-index: 1;
.setting {
position: fixed;
left: 0;
right: 0;
margin: auto;
width: 48%;
padding: 1%;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
z-index: 99;
border-radius: 8px 8px 0 0;
}
.content {
margin-top: 15%;
padding: 0 4%;
.province {
display: flex;
flex-wrap: wrap;
font-weight: bold;
margin-bottom: 5px;
label {
font-size: 14px;
font-weight: bold;
}
}
.city {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
label {
font-size: 13.3px;
}
.city-item {
width: 100px;
text-align: left;
}
}
}
.sort {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.button-area {
text-align: right;
margin-bottom: 12px;
padding-right: 40px;
position: relative;
.clear {
margin-right: 40px;
}
.warn {
background-color: #6c757d;
border-color: #6c757d;
}
.confirm {
background-color: #409eff;
border-color: #409eff;
}
.color-button {
color: #fff;
border: none;
}
.close {
position: absolute;
right: 1px;
top: 9px;
width: 32px;
height: 32px;
opacity: 0.3;
cursor: pointer;
transition: 0.3s all;
}
.close:hover {
opacity: 1;
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 16px;
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
button {
background: #fff;
border: 1px solid #dcdfe6;
outline: none;
cursor: pointer;
padding: 7px 20px;
border-radius: 4px;
border-color: #dcdfe6;
color: #595a5e;
margin-right: 12px;
}
}
.letter-item {
color: #333;
font-weight: bold;
padding: 5px;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
margin: 0 3px;
transition: 0.3s all;
&.active {
background-color: #337ab7;
color: #fff;
}
&:hover {
background-color: #337ab7;
color: #fff;
}
}
label {
cursor: pointer;
}
input[type="checkbox"] {
width: 13px;
height: 13px;
opacity: 0;
vertical-align: middle;
margin-right: 5px;
}
&::-webkit-scrollbar {
width: 0 !important;
}
& {
-ms-overflow-style: none;
}
& {
overflow: -moz-scrollbars-none;
}
}
.check-box {
width: 18px;
height: 18px;
position: absolute;
margin-top: -1px;
}
}
.cn-picker-input {
border: 1px solid #c0c4cc;
line-height: 30px;
cursor: pointer;
padding: 0 20px 0 10px;
border-radius: 4px;
color: #333;
text-overflow: ellipsis;
outline: none;
&::-webkit-input-placeholder {
color: #c9ccd8;
}
&::-moz-placeholder {
/* Firefox 19+ */
color: #c9ccd8;
}
&:-ms-input-placeholder {
/* IE 10+ */
color: #c9ccd8;
}
&:-moz-placeholder {
/* Firefox 18- */
color: #c9ccd8;
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
4、region-picker.vue
<template>
<div class="outer">
<div class="input-area" :style="`width: ${width + 30}px;`">
<input
type="text"
@focus="showPicker = true"
:value="showPickedCity"
:title="showPickedCity"
:class="`${inputClass || 'cn-picker-input'}`"
:placeholder="placeholder"
:style="`width: ${width}px;`"
/>
<span class="input-close" v-if="showCloseBtn" @click.stop.prevent="handleAllStatus(false)"></span>
</div>
<transition name="fade">
<div class="picker-bg" v-show="showPicker" @click.stop.self="closeModalPicker">
<!-- 此处不能prevent -->
<div class="picker">
<div class="setting">
<div class="button-area">
<button
class="clear warn color-button"
@click.stop.prevent="handleAllStatus(false)"
>全部清空
</button>
<button @click.stop.prevent="handleAllStatus(true)">全选</button>
<button @click.stop.prevent="inverse">反选</button>
<button class="confirm color-button" @click.stop.prevent="pick">确认</button>
<div class="close" @click.stop.prevent="showPicker = false"></div>
</div>
<div class="sort">
<span
:class="`letter-item ${activeLetter === item ? 'active' : ''}`"
v-for="item in letter"
:key="item"
@click="clickLetter(item)"
>{{item}}</span>
</div>
</div>
<div class="content">
<CheckboxGroup v-for="(item, index) in originCityData" :key="item.id">
<div class="province">
<label>
{{item.province.shortName}}
</label>
</div>
<div class="city">
<CheckboxGroup>
<Checkbox v-for="cityItem in item.city" :key="cityItem.index"
:label="cityItem.index" v-model="cityStatus[Number(cityItem.id)]">
{{cityItem.shortName}}
</Checkbox>
</CheckboxGroup>
</div>
</CheckboxGroup>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import regions from "@/assets/regions";
export default {
name: "CnRegionPicker",
data() {
return {
provinceSelect: false,
indeterminateProvinceSelect: false,
provinceStatus: [],
cityStatus: [],
showPicker: false,
originCityData: Object.freeze(regions),
letter: [
"全部",
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z"
],
activeLetter: "全部",
pickData: []
};
},
props: {
placeholder: {
type: [String],
default: "选择城市"
},
showCloseBtn: {
type: [Boolean],
default: true
},
clickModal: {
type: [Boolean],
default: true
},
inputClass: {
type: [String],
default: null
},
width: {
type: [Number],
default: 250
},
pickedCity: {
type: String,
default: null
}
},
methods: {
clearAll(bool) {
regions.forEach(item => {
item.city.forEach((cityItem) => {
this.cityStatus[Number(cityItem.id)] = bool;
});
});
},
pick() {
let checkedCity = []; // 勾选的城市index
let outPutArr = [];
this.cityStatus.forEach((cityItem, index) => {
if (cityItem) {
checkedCity.push(index);
}
});
regions.forEach(item => {
item.city.forEach((cityItem) => {
if (checkedCity.indexOf(Number(cityItem.id)) !== -1) {
outPutArr.push(cityItem);
}
});
});
this.$emit("on-pick-city", outPutArr.map(item => item.id).join(","));
this.pickData = outPutArr;
this.showPicker = false;
},
inverse() {
this.cityStatus.forEach((item, index) => {
this.$set(this.cityStatus, index, !item);
});
},
handleAllStatus(bool) {
this.cityStatus.forEach((item, index) => {
this.$set(this.cityStatus, index, bool);
});
if (!bool) {
this.pickData = [];
}
},
clickLetter(letter) {
this.activeLetter = letter;
let originCityData = [];
regions.forEach(item => {
let sortCity = [];
item.city.forEach(cityItem => {
if (cityItem.pinYin[0].toUpperCase() === letter) {
sortCity.push(cityItem);
}
});
if (sortCity.length > 0) {
originCityData.push({
city: sortCity,
province: item.province
});
}
});
this.originCityData =
letter === "全部"
? Object.freeze(regions)
: Object.freeze(originCityData);
},
closeModalPicker() {
if (this.clickModal) {
this.showPicker = false;
}
}
},
computed: {
showPickedCity() {
console.log("this.pickedCity==", this.pickedCity);
let result = "";
this.pickData.forEach(city => {
this.cityStatus[Number(city.id)] = true;
result += `${city.name} `;
});
this.pickData = [];
return result;
}
},
watch: {
pickedCity: {
handler(newOne) {
regions.forEach(item => {
item.city.forEach((cityItem) => {
this.cityStatus[Number(cityItem.id)] = false;
if (newOne.split(",").indexOf(cityItem.id) != -1) {
this.pickData.push(cityItem);
}
});
});
}
},
pickData: {
handler(newOne) {
newOne.forEach(city => {
this.cityStatus[Number(city.id)] = true;
});
}
}
},
created: function () {
this.clearAll(false);
}
};
</script>
<style lang="scss" scoped>
@import './picker.scss';
</style>
5、父组件应用
<RegionPicker
:pickedCity="pickedCitys"
@on-pick-city="pickedCity"
placeholder="排除地域">
</RegionPicker>
pickedCitys 传入逗号分隔的城市id即可
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
