1.在实际的工作环境中我们会遇见一些非常固定但是又数据又很大的下拉框数据,比如各级省份和国家选择。我就遇到了一个需要对世界所有国家进行下拉选择并展示对应国旗的需求。这种需求很少见,但是一旦遇到也很麻烦,就算建字典也会很累不实用。而我更建议将这类数据写在前端。
2.首先是国家的相关下拉数据,我们可以在utils工具文件下建一个JS文件放入此代码,然后在需要的模块中引入该数据就可以了。
export function _CountriesName() {
return [
{
value: "yz",
label: "亚洲",
children: [
//
{
value: "中国",
label: "中国",
},
//
{
value: "蒙古",
label: "蒙古",
},
{
value: "朝鲜",
label: "朝鲜",
},
//
{
value: "韩国",
label: "韩国",
},
//
{
value: "日本",
label: "日本",
},
//
{
value: "菲律宾",
label: "菲律宾",
},
//
{
value: "越南",
label: "越南",
},
//
{
value: "老挝",
label: "老挝",
},
//
{
value: "柬埔寨",
label: "柬埔寨",
},
//
{
value: "缅甸",
label: "缅甸",
},
//
{
value: "泰国",
label: "泰国",
},
//
{
value: "马来西亚",
label: "马来西亚",
},
//
{
value: "文莱",
label: "文莱",
},
//
{
value: "新加坡",
label: "新加坡",
},
//
{
value: "印度尼西亚",
label: "印度尼西亚",
},
//
{
value: "东帝汶",
label: "东帝汶",
},
//
{
value: "尼泊尔",
label: "尼泊尔",
},
//
{
value: "不丹",
label: "不丹",
},
//
{
value: "孟加拉国",
label: "孟加拉国",
},
//
{
value: "印度",
label: "印度",
},
//
{
value: "巴基斯坦",
label: "巴基斯坦",
},
{
value: "斯里兰卡",
label: "斯里兰卡",
},
//
{
value: "马尔代夫",
label: "马尔代夫",
},
//
{
value: "哈萨克斯坦",
label: "哈萨克斯坦",
},
//
{
value: "吉尔吉斯斯坦",
label: "吉尔吉斯斯坦",
},
{
value: "塔吉克斯坦",
label: "塔吉克斯坦",
},
//
{
value: "乌兹别克斯坦",
label: "乌兹别克斯坦",
},
//
{
value: "土库曼斯坦",
label: "土库曼斯坦",
},
//
{
value: "阿富汗",
label: "阿富汗",
},
//
{
value: "伊拉克",
label: "伊拉克",
},
//
{
value: "伊朗",
label: "伊朗",
},
//
{
value: "叙利亚",
label: "叙利亚",
},
//
{
value: "约旦",
label: "约旦",
},
//
{
value: "黎巴嫩",
label: "黎巴嫩",
},
//
{
value: "以色列",
label: "以色列",
},
{
value: "巴勒斯坦",
label: "巴勒斯坦",
},
//
{
value: "沙特阿拉伯",
label: "沙特阿拉伯",
},
//
{
value: "巴林",
label: "巴林",
},
//
{
value: "卡塔尔",
label: "卡塔尔",
},
{
value: "科威特",
label: "科威特",
},
//
{
value: "阿拉伯联合酋长国",
label: "阿拉伯联合酋长国",
},
//
{
value: "阿曼",
label: "阿曼",
},
//
{
value: "也门",
label: "也门",
},
//
{
value: "格鲁吉亚",
label: "格鲁吉亚",
},
//
{
value: "亚美尼亚",
label: "亚美尼亚",
},
//
{
value: "阿塞拜疆",
label: "阿塞拜疆",
},
//
{
value: "土耳其",
label: "土耳其",
},
//
{
value: "塞浦路斯",
label: "塞浦路斯",
},
],
},
{
value: "oz",
label: "欧洲",
children: [
//
{
value: "芬兰",
label: "芬兰",
},
//
{
value: "瑞典",
label: "瑞典",
},
//
{
value: "挪威",
label: "挪威",
},
//
{
value: "冰岛",
label: "冰岛",
},
//
{
value: "爱沙尼亚",
label: "爱沙尼亚",
},
//
{
value: "拉脱维亚",
label: "拉脱维亚",
},
//
{
value: "立陶宛",
label: "立陶宛",
},
//
{
value: "摩尔多瓦",
label: "摩尔多瓦",
},
//
{
value: "白俄罗斯",
label: "白俄罗斯",
},
//
{
value: "俄罗斯",
label: "俄罗斯",
},
//
{
value: "乌克兰",
label: "乌克兰",
},
//
{
value: "波兰",
label: "波兰",
},
//
{
value: "捷克共和国",
label: "捷克共和国",
},
//
{
value: "斯洛伐克",
label: "斯洛伐克",
},
//
{
value: "匈牙利",
label: "匈牙利",
},
//
{
value: "德国",
label: "德国",
},
//
{
value: "奥地利",
label: "奥地利",
},
//
{
value: "瑞士",
label: "瑞士",
},
//
{
value: "列支敦士登",
label: "列支敦士登",
},
//
{
value: "英国",
label: "英国",
},
//
{
value: "爱尔兰",
label: "爱尔兰",
},
//
{
value: "荷兰",
label: "荷兰",
},
//
{
value: "比利时",
label: "比利时",
},
//
{
value: "卢森堡",
label: "卢森堡",
},
//
{
value: "法国",
label: "法国",
},
//
{
value: "摩纳哥",
label: "摩纳哥",
},
//
{
value: "罗马尼亚",
label: "罗马尼亚",
},
//
{
value: "保加利亚",
label: "保加利亚",
},
//
{
value: "塞尔维亚",
label: "塞尔维亚",
},
//
{
value: "马其顿",
label: "马其顿",
},
//
{
value: "斯洛文尼亚",
label: "斯洛文尼亚",
},
{
value: "克罗地亚",
label: "克罗地亚",
},
//
{
value: "黑山共和国",
label: "黑山共和国",
},
//
{
value: "波斯尼亚和黑塞哥维那",
label: "波斯尼亚和黑塞哥维那",
},
//
{
value: "阿尔巴尼亚",
label: "阿尔巴尼亚",
},
//
{
value: "希腊",
label: "希腊",
},
//
{
value: "意大利",
label: "意大利",
},
{
value: "马耳他",
label: "马耳他",
},
{
value: "丹麦",
label: "丹麦",
},
//
{
value: "梵蒂冈",
label: "梵蒂冈",
},
//
{
value: "圣马力诺",
label: "圣马力诺",
},
//
{
value: "西班牙",
label: "西班牙",
},
//
{
value: "葡萄牙",
label: "葡萄牙",
},
//
{
value: "安道尔共和国",
label: "安道尔共和国",
},
],
},
{
value: "fz",
label: "非洲",
children: [
//
{
value: "埃及",
label: "埃及",
},
//
{
value: "利比亚",
label: "利比亚",
},
//
{
value: "突尼斯",
label: "突尼斯",
},
//
{
value: "阿尔及利亚",
label: "阿尔及利亚",
},
//
{
value: "摩洛哥",
label: "摩洛哥",
},
//
{
value: "苏丹",
label: "苏丹",
},
{
value: "南苏丹",
label: "南苏丹",
},
//
{
value: "埃塞俄比亚",
label: "埃塞俄比亚",
},
//
{
value: "厄立特里亚",
label: "厄立特里亚",
},
//
{
value: "索马里",
label: "索马里",
},
//
{
value: "吉布提",
label: "吉布提",
},
//
{
value: "肯尼亚",
label: "肯尼亚",
},
//
{
value: "坦桑尼亚",
label: "坦桑尼亚",
},
//
{
value: "乌干达",
label: "乌干达",
},
//
{
value: "卢旺达",
label: "卢旺达",
},
//
{
value: "布隆迪",
label: "布隆迪",
},
//
{
value: "塞舌尔",
label: "塞舌尔",
},
//
{
value: "乍得共和国",
label: "乍得共和国",
},
//
{
value: "中非共和国",
label: "中非共和国",
},
//
{
value: "喀麦隆",
label: "喀麦隆",
},
//
{
value: "赤道几内亚",
label: "赤道几内亚",
},
//
{
value: "加蓬",
label: "加蓬",
},
//
{
value: "刚果共和国",
label: "刚果共和国",
},
//
{
value: "刚果民主共和国",
label: "刚果民主共和国",
},
//
{
value: "圣多美和普林西比",
label: "圣多美和普林西比",
},
//
{
value: "毛里塔尼亚",
label: "毛里塔尼亚",
},
//
{
value: "塞内加尔",
label: "塞内加尔",
},
//
{
value: "冈比亚",
label: "冈比亚",
},
//
{
value: "马里共和国",
label: "马里共和国",
},
//
{
value: "布基纳法索",
label: "布基纳法索",
},
//
{
value: "几内亚",
label: "几内亚",
},
//
{
value: "几内亚比绍",
label: "几内亚比绍",
},
{
value: "佛得角",
label: "佛得角",
},
//
{
value: "塞拉利昂",
label: "塞拉利昂",
},
{
value: "利比里亚",
label: "利比里亚",
},
//
{
value: "科特迪瓦",
label: "科特迪瓦",
},
//
{
value: "加纳",
label: "加纳",
},
//
{
value: "多哥",
label: "多哥",
},
//
{
value: "贝宁共和国",
label: "贝宁共和国",
},
//
{
value: "尼日尔",
label: "尼日尔",
},
//
{
value: "尼日利亚",
label: "尼日利亚",
},
//
{
value: "赞比亚",
label: "赞比亚",
},
//
{
value: "安哥拉",
label: "安哥拉",
},
//
{
value: "津巴布韦",
label: "津巴布韦",
},
//
{
value: "马拉维",
label: "马拉维",
},
//
{
value: "莫桑比克",
label: "莫桑比克",
},
//
{
value: "博茨瓦纳",
label: "博茨瓦纳",
},
//
{
value: "纳米比亚",
label: "纳米比亚",
},
//
{
value: "南非",
label: "南非",
},
//
{
value: "斯威士兰",
label: "斯威士兰",
},
//
{
value: "莱索托",
label: "莱索托",
},
//
{
value: "马达加斯加",
label: "马达加斯加",
},
//
{
value: "科摩罗联盟",
label: "科摩罗联盟",
},
//
{
value: "毛里求斯",
label: "毛里求斯",
},
],
},
{
value: "bmz",
label: "北美洲",
children: [
//
{
value: "加拿大",
label: "加拿大",
},
//
{
value: "美国",
label: "美国",
},
//
{
value: "墨西哥",
label: "墨西哥",
},
{
value: "危地马拉",
label: "危地马拉",
},
{
value: "伯利兹",
label: "伯利兹",
},
//
{
value: "萨尔瓦多",
label: "萨尔瓦多",
},
//
{
value: "洪都拉斯",
label: "洪都拉斯",
},
//
{
value: "尼加拉瓜",
label: "尼加拉瓜",
},
{
value: "哥斯达黎加",
label: "哥斯达黎加",
},
//
{
value: "巴拿马",
label: "巴拿马",
},
//
{
value: "巴哈马群岛",
label: "巴哈马群岛",
},
//
{
value: "古巴",
label: "古巴",
},
//
{
value: "牙买加",
label: "牙买加",
},
//
{
value: "海地",
label: "海地",
},
//
{
value: "多米尼加共和国",
label: "多米尼加共和国",
},
//
{
value: "安提瓜和巴布达",
label: "安提瓜和巴布达",
},
//
{
value: "圣基茨和尼维斯",
label: "圣基茨和尼维斯",
},
//
{
value: "多米尼克",
label: "多米尼克",
},
//
{
value: "圣卢西亚",
label: "圣卢西亚",
},
//
{
value: "圣文森特和格林纳丁斯",
label: "圣文森特和格林纳丁斯",
},
//
{
value: "格林纳达",
label: "格林纳达",
},
//
{
value: "巴巴多斯",
label: "巴巴多斯",
},
//
{
value: "特立尼达和多巴哥",
label: "特立尼达和多巴哥",
},
],
},
{
value: "nmz",
label: "南美洲",
children: [
//
{
value: "哥伦比亚",
label: "哥伦比亚",
},
//
{
value: "委内瑞拉",
label: "委内瑞拉",
},
//
{
value: "圭亚那",
label: "圭亚那",
},
//
{
value: "苏里南",
label: "苏里南",
},
//
{
value: "厄瓜多尔",
label: "厄瓜多尔",
},
//
{
value: "秘鲁",
label: "秘鲁",
},
//
{
value: "巴西",
label: "巴西",
},
//
{
value: "智利",
label: "智利",
},
//
{
value: "阿根廷",
label: "阿根廷",
},
//
{
value: "乌拉圭",
label: "乌拉圭",
},
//
{
value: "巴拉圭",
label: "巴拉圭",
},
],
},
{
value: "dyz",
label: "大洋洲",
children: [
//
{
value: "澳大利亚",
label: "澳大利亚",
},
{
value: "新西兰",
label: "新西兰",
},
{
value: "帕劳",
label: "帕劳",
},
{
value: "密克罗尼西亚联邦",
label: "密克罗尼西亚联邦",
},
{
value: "马绍尔群岛",
label: "马绍尔群岛",
},
{
value: "基里巴斯",
label: "基里巴斯",
},
{
value: "瑙鲁",
label: "瑙鲁",
},
{
value: "巴布亚新几内亚",
label: "巴布亚新几内亚",
},
{
value: "所罗门群岛",
label: "所罗门群岛",
},
//
{
value: "瓦努阿图",
label: "瓦努阿图",
},
{
value: "斐济",
label: "斐济",
},
//
{
value: "图瓦卢",
label: "图瓦卢",
},
{
value: "萨摩亚",
label: "萨摩亚",
},
//
{
value: "汤加",
label: "汤加",
},
{
value: "库克群岛",
label: "库克群岛",
},
],
},
]
}
3.我所遇到的场景需要匹配对应的国家国旗,下列是整理好的国旗图片。