使用vue+Element ui制作56个民族下拉列表

1.页面

<template><div><el-select v-model="nationvalue" filterable placeholder="请选择民族" class="add-nation-input" @change="nationChange"><el-option v-for="item in nationList" :key="item.value" :label="item.info" :value="item.value"></el-option></el-select></div>
</template>

2.script

export default {data() {return {nationvalue: "",nationList: [{id: 1,info: "汉族",value: 1,},{id: 2,info: "壮族",value: 2,},{id: 3,info: "满族",value: 3,},{id: 4,info: "回族",value: 4,},{id: 5,info: "苗族",value: 5,},{id: 6,info: "维吾尔族",value: 6,},{id: 7,info: "土家族",value: 7,},{id: 8,info: "彝族",value: 8,},{id: 9,info: "蒙古族",value: 9,},{id: 10,info: "藏族",value: 10,},{id: 11,info: "布依族",value: 11,},{id: 12,info: "侗族",value: 12,},{id: 13,info: "瑶族",value: 13,},{id: 14,info: "朝鲜族",value: 14,},{id: 15,info: "白族",value: 15,},{id: 16,info: "哈尼族",value: 16,},{id: 17,info: "哈萨克族",value: 17,},{id: 18,info: "黎族",value: 18,},{id: 19,info: "傣族",value: 19,},{id: 20,info: "畲族",value: 20,},{id: 21,info: "傈僳族",value: 21,},{id: 22,info: "仡佬族",value: 22,},{id: 23,info: "东乡族",value: 23,},{id: 24,info: "高山族",value: 24,},{id: 25,info: "拉祜族",value: 25,},{id: 26,info: "水族",value: 26,},{id: 27,info: "佤族",value: 27,},{id: 28,info: "纳西族",value: 28,},{id: 29,info: "羌族",value: 29,},{id: 30,info: "土族",value: 30,},{id: 31,info: "仫佬族",value: 31,},{id: 32,info: "锡伯族",value: 32,},{id: 33,info: "柯尔克孜族",value: 33,},{id: 34,info: "达斡尔族",value: 34,},{id: 35,info: "景颇族",value: 35,},{id: 36,info: "毛南族",value: 36,},{id: 37,info: "撒拉族",value: 37,},{id: 38,info: "布朗族",value: 38,},{id: 39,info: "塔吉克族",value: 39,},{id: 40,info: "阿昌族",value: 40,},{id: 41,info: "普米族",value: 41,},{id: 42,info: "鄂温克族",value: 42,},{id: 43,info: "怒族",value: 43,},{id: 44,info: "京族",value: 44,},{id: 45,info: "基诺族",value: 45,},{id: 46,info: "德昂族",value: 46,},{id: 47,info: "保安族",value: 47,},{id: 48,info: "俄罗斯族",value: 48,},{id: 49,info: "裕固族",value: 49,},{id: 50,info: "乌孜别克族",value: 50,},{id: 51,info: "门巴族",value: 51,},{id: 52,info: "鄂伦春族",value: 52,},{id: 53,info: "独龙族",value: 53,},{id: 54,info: "塔塔尔族",value: 54,},{id: 55,info: "赫哲族",value: 55,},{id: 56,info: "珞巴族",value: 56,},],};},};

这样一个简单的民族下拉列表就做好了

使用vue+Element ui制作56个民族下拉列表相关推荐

icworks+D2Admin+vue+element UI 制作后台管理
前言: icworks又名飞冰海量可复用物料,通过 GUI 工具极速构建中后台应用.是阿里巴巴前端团队开源的一个产品,目的让前端开发简单而友好. 进入正题使用以及构建项目非常简单 1.直接进入官网 ...
vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面话不多说,先上图界面效果图下面直接上代码: <template><div class="loginbody&q ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

使用vue+Element ui制作56个民族下拉列表

使用vue+Element ui制作56个民族下拉列表

1.页面

2.script

使用vue+Element ui制作56个民族下拉列表相关推荐

最新文章

热门文章