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

vue基于element组件的国籍选择框相关推荐

vue基于el-timeline组件实现动态表格时间线
前言 element中表格和时间线组件相信不少同学都用过吧,现在有这么一个需求,利用时间线组件实现不同时间线下的表格数据展示,同时表格表头及表格内的数据也是动态渲染的,效果如下图. 实现效果: 实现思 ...
vue基于element实现批量删除
前言当数据量庞大时,批量对数据进行操作在后台管理系统中再常见不过了,今天用 vue 基于 element 实现批量删除. 实现思路实现这个操作的关键就在于表格需要绑定 @selection-cha ...
前端基于element组件的语音文件上传
前端基于element组件的语音文件上传原理项目采用的是element组件的UI库,基于标签,实现基本的文件上传功能,并基于标签内置的触发事件,实现了对语音文件大小,格式,上传前确认,上传后显示已 ...
Vue基于ElementUI组件实现滑块登录验证组件
引言在实际项目应用开发中,为了防止用户频繁发起登录请求,导致后端登录访问压力瞬时过大,我们可以设计一些验证规则防刷,最常见的方式是通过输入验证码的方式降低刷新频率,后台通过返回不同的验证码从而降低用 ...
vue 上传图片视频组件，可拍照选择照片，解决苹果手机拍照旋转问题
vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题参考文章: (1)vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 (2)https://www.cnblogs. ...
Vue：Vue的element组件中的el-row的属性gutter什么意思？
Vue:Vue的element组件中的el-row的属性gutter什么意思? 资源 gutter elementui中gutter和offset的区别
Vue实现Element UI的下拉框默认选中，值来自父组件或异步获取
子组件使用watch监听父组件传过来的值,并且赋值给子组件的data参数. 1.父组件传了一个userId属性给子组件 <Children@searchForm="searchForm ...
JavaWeb前端框架VUE和Element组件详解
文章目录前言一.前端框架--VUE 1.1 概述 1.2 快速入门 1.3 Vue 指令 1.3.1 v-bind & v-model 指令 1.3.2 v-on 指令 1.3.3 条件判 ...
Ant组件——DatePicker 日期选择框
相关文档 DatePicker 日期选择框业务需求设置两个时间选择框,一个是开始时间,一个是结束时间,两者相互制约,开始不能早于结束,结束不能小于开始代码示例 1.html <a-form ...
Vue引入element组件
项目场景: 在使用vue写前端页面时,我们可以使用一些组件来帮助我们快速构建前端页面.此时,我们可以使用element,在使用之前,我们需要导入element组件. 问题描述在csdn上寻找一些教程 ...

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

vue基于element组件的国籍选择框相关推荐

最新文章

热门文章