vue基于element组件的国籍选择框

找了好久都没个资源，下载的还都要钱，索性就找了点资源自己转化了下

 

 效果如上图，以下是代码（使用的组件不重要，国家的那个数组资源难找）

<el-select  placeholder="请选择国籍" filterable style="width: 77.9%" v-model="FormInput.nation">
  <el-option-group v-for="group in country":key="group.label" :label="group.label">
     <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.label">
         <span style="float: left">{{ item.label }}</span>
         <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
     </el-option>
  </el-option-group>
</el-select>

country:[{
                label: '热门国家',
                options: [{value:'China',label:'中国'},]
            },{
                label: '所有国家',
                options: [
                    {value:'Angola',label:'安哥拉'},
                    {value:'Afghanistan',label:'阿富汗'},
                    {value:'Albania',label:'阿尔巴尼亚'},
                    {value:'Algeria',label:'阿尔及利亚'},
                    {value:'Andorra',label:'安道尔共和国'},
                    {value:'Anguilla',label:'安圭拉岛'},
                    {value:'Antigua and Barbuda',label:'安提瓜和巴布达'},
                    {value:'Argentina',label:'阿根廷'},
                    {value:'Armenia',label:'亚美尼亚'},
                    {value:'Ascension',label:'阿森松'},
                    {value:'Australia',label:'澳大利亚'},
                    {value:'Austria',label:'奥地利'},
                    {value:'Azerbaijan',label:'阿塞拜疆'},
                    {value:'Bahamas',label:'巴哈马'},
                    {value:'Bahrain',label:'巴林'},
                    {value:'Bangladesh',label:'孟加拉国'},
                    {value:'Barbados',label:'巴巴多斯'},
                    {value:'Belarus',label:'白俄罗斯'},
                    {value:'Belgium',label:'比利时'},
                    {value:'Belize',label:'伯利兹'},
                    {value:'Benin',label:'贝宁'},
                    {value:'Bermuda Is',label:'百慕大群岛'},
                    {value:'Bolivia',label:'玻利维亚'},
                    {value:'Botswana',label:'博茨瓦纳'},
                    {value:'Brazil',label:'巴西'},
                    {value:'Brunei',label:'文莱'},
                    {value:'Bulgaria',label:'保加利亚'},
                    {value:'Burkina Faso',label:'布基纳法索'},
                    {value:'Burma',label:'缅甸'},
                    {value:'Burundi',label:'布隆迪'},
                    {value:'Cameroon',label:'喀麦隆'},
                    {value:'Canada',label:'加拿大'},
                    {value:'Cayman Is',label:'开曼群岛'},
                    {value:'Central African Republic',label:'中非共和国'},
                    {value:'Chad',label:'乍得'},
                    {value:'Chile',label:'智利'},
                    {value:'China',label:'中国'},
                    {value:'Colombia',label:'哥伦比亚'},
                    {value:'Congo',label:'刚果'},
                    {value:'Cook Is',label:'库克群岛'},
                    {value:'Costa Rica',label:'哥斯达黎加'},
                    {value:'Cuba',label:'古巴'},
                    {value:'Cyprus',label:'塞浦路斯'},
                    {value:'Czech Republic',label:'捷克'},
                    {value:'Denmark',label:'丹麦'},
                    {value:'Djibouti',label:'吉布提'},
                    {value:'Dominica Rep',label:'多米尼加共和国'},
                    {value:'Ecuador',label:'厄瓜多尔'},
                    {value:'Egypt',label:'埃及'},
                    {value:'EI Salvador',label:'萨尔瓦多'},
                    {value:'Estonia',label:'爱沙尼亚'},
                    {value:'Ethiopia',label:'埃塞俄比亚'},
                    {value:'Fiji',label:'斐济'},
                    {value:'Finland',label:'芬兰'},
                    {value:'France',label:'法国'},
                    {value:'French Guiana',label:'法属圭亚那'},
                    {value:'French Polynesia',label:'法属玻利尼西亚'},
                    {value:'Gabon',label:'加蓬'},
                    {value:'Gambia',label:'冈比亚'},
                    {value:'Georgia',label:'格鲁吉亚'},
                    {value:'Germany',label:'德国'},
                    {value:'Ghana',label:'加纳'},
                    {value:'Gibraltar',label:'直布罗陀'},
                    {value:'Greece',label:'希腊'},
                    {value:'Grenada',label:'格林纳达'},
                    {value:'Guam',label:'关岛'},
                    {value:'Guatemala',label:'危地马拉'},
                    {value:'Guinea',label:'几内亚'},
                    {value:'Guyana',label:'圭亚那'},
                    {value:'Haiti',label:'海地'},
                    {value:'Honduras',label:'洪都拉斯'},
                    {value:'Hungary',label:'匈牙利'},
                    {value:'Iceland',label:'冰岛'},
                    {value:'India',label:'印度'},
                    {value:'Indonesia',label:'印度尼西亚'},
                    {value:'Iran',label:'伊朗'},
                    {value:'Iraq',label:'伊拉克'},
                    {value:'Ireland',label:'爱尔兰'},
                    {value:'Israel',label:'以色列'},
                    {value:'Italy',label:'意大利'},
                    {value:'Ivory Coast',label:'科特迪瓦'},
                    {value:'Jamaica',label:'牙买加'},
                    {value:'Japan',label:'日本'},
                    {value:'Jordan',label:'约旦'},
                    {value:'Kampuchea (Cambodia )',label:'柬埔寨'},
                    {value:'Kazakstan',label:'哈萨克斯坦'},
                    {value:'Kenya',label:'肯尼亚'},
                    {value:'Korea',label:'韩国'},
                    {value:'Kuwait',label:'科威特'},
                    {value:'Kyrgyzstan',label:'吉尔吉斯坦'},
                    {value:'Laos',label:'老挝'},
                    {value:'Latvia',label:'拉脱维亚'},
                    {value:'Lebanon',label:'黎巴嫩'},
                    {value:'Lesotho',label:'莱索托'},
                    {value:'Liberia',label:'利比里亚'},
                    {value:'Libya',label:'利比亚'},
                    {value:'Liechtenstein',label:'列支敦士登'},
                    {value:'Lithuania',label:'立陶宛'},
                    {value:'Luxembourg',label:'卢森堡'},
                    {value:'Madagascar',label:'马达加斯加'},
                    {value:'Malawi',label:'马拉维'},
                    {value:'Malaysia',label:'马来西亚'},
                    {value:'Maldives',label:'马尔代夫'},
                    {value:'Mali',label:'马里'},
                    {value:'Malta',label:'马耳他'},
                    {value:'Mariana Is',label:'马里亚那群岛'},
                    {value:'Martinique',label:'马提尼克'},
                    {value:'Mauritius',label:'毛里求斯'},
                    {value:'Mexico',label:'墨西哥'},
                    {value:'Moldova',label:'摩尔多瓦'},
                    {value:'Monaco',label:'摩纳哥'},
                    {value:'Mongolia',label:'蒙古'},
                    {value:'Montserrat Is',label:'蒙特塞拉特岛'},
                    {value:'Morocco',label:'摩洛哥'},
                    {value:'Mozambique',label:'莫桑比克'},
                    {value:'Namibia',label:'纳米比亚'},
                    {value:'Nauru',label:'瑙鲁'},
                    {value:'Nepal',label:'尼泊尔'},
                    {value:'Netheriands Antilles',label:'荷属安的列斯'},
                    {value:'Netherlands',label:'荷兰'},
                    {value:'New Zealand',label:'新西兰'},
                    {value:'Nicaragua',label:'尼加拉瓜'},
                    {value:'Niger',label:'尼日尔'},
                    {value:'Nigeria',label:'尼日利亚'},
                    {value:'North Korea',label:'朝鲜'},
                    {value:'Norway',label:'挪威'},
                    {value:'Oman',label:'阿曼'},
                    {value:'Pakistan',label:'巴基斯坦'},
                    {value:'Panama',label:'巴拿马'},
                    {value:'Papua New Cuinea',label:'巴布亚新几内亚'},
                    {value:'Paraguay',label:'巴拉圭'},
                    {value:'Peru',label:'秘鲁'},
                    {value:'Philippines',label:'菲律宾'},
                    {value:'Poland',label:'波兰'},
                    {value:'Portugal',label:'葡萄牙'},
                    {value:'Puerto Rico',label:'波多黎各'},
                    {value:'Qatar',label:'卡塔尔'},
                    {value:'Reunion',label:'留尼旺'},
                    {value:'Romania',label:'罗马尼亚'},
                    {value:'Russia',label:'俄罗斯'},
                    {value:'Saint Lueia',label:'圣卢西亚'},
                    {value:'Saint Vincent',label:'圣文森特岛'},
                    {value:'Samoa Eastern',label:'东萨摩亚(美)'},
                    {value:'Samoa Western',label:'西萨摩亚'},
                    {value:'San Marino',label:'圣马力诺'},
                    {value:'Sao Tome and Principe',label:'圣多美和普林西比'},
                    {value:'Saudi Arabia',label:'沙特阿拉伯'},
                    {value:'Senegal',label:'塞内加尔'},
                    {value:'Seychelles',label:'塞舌尔'},
                    {value:'Sierra Leone',label:'塞拉利昂'},
                    {value:'Singapore',label:'新加坡'},
                    {value:'Slovakia',label:'斯洛伐克'},
                    {value:'Slovenia',label:'斯洛文尼亚'},
                    {value:'Solomon Is',label:'所罗门群岛'},
                    {value:'Somali',label:'索马里'},
                    {value:'South Africa',label:'南非'},
                    {value:'Spain',label:'西班牙'},
                    {value:'SriLanka',label:'斯里兰卡'},
                    {value:'St.Lucia',label:'圣卢西亚'},
                    {value:'St.Vincent',label:'圣文森特'},
                    {value:'Sudan',label:'苏丹'},
                    {value:'Suriname',label:'苏里南'},
                    {value:'Swaziland',label:'斯威士兰'},
                    {value:'Sweden',label:'瑞典'},
                    {value:'Switzerland',label:'瑞士'},
                    {value:'Syria',label:'叙利亚'},
                    {value:'Tajikstan',label:'塔吉克斯坦'},
                    {value:'Tanzania',label:'坦桑尼亚'},
                    {value:'Thailand',label:'泰国'},
                    {value:'Togo',label:'多哥'},
                    {value:'Tonga',label:'汤加'},
                    {value:'Trinidad and Tobago',label:'特立尼达和多巴哥'},
                    {value:'Tunisia',label:'突尼斯'},
                    {value:'Turkey',label:'土耳其'},
                    {value:'Turkmenistan',label:'土库曼斯坦'},
                    {value:'Uganda',label:'乌干达'},
                    {value:'Ukraine',label:'乌克兰'},
                    {value:'United Arab Emirates',label:'阿拉伯联合酋长国'},
                    {value:'United Kiongdom',label:'英国'},
                    {value:'United States of America',label:'美国'},
                    {value:'Uruguay',label:'乌拉圭'},
                    {value:'Uzbekistan',label:'乌兹别克斯坦'},
                    {value:'Venezuela',label:'委内瑞拉'},
                    {value:'Vietnam',label:'越南'},
                    {value:'Yemen',label:'也门'},
                    {value:'Yugoslavia',label:'南斯拉夫'},
                    {value:'Zimbabwe',label:'津巴布韦'},
                    {value:'Zaire',label:'扎伊尔'},
                    {value:'Zambia',label:'赞比亚'}
                ]
            }],

另外，GitHub也有可以使用的组件：https://github.com/Haixing-Hu/vue-country-select