记一次uni-app56个民族下拉

这段代码展示了如何在前端实现一个民族选择组件,包括数据源`nationData`的定义,页面中组件的调用方式,以及选中值的回调处理。民族数据包含中国所有56个民族,通过`u-form-item`和`u-select`组件实现交互,回调函数`nationConfirm`用于处理选定值并更新模型。
摘要由CSDN通过智能技术生成

新建nation.js:

var nationData=[
{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:'维吾尔族'},
{label:'壮族',value:'壮族'},
{label:'土家族',value:'土家族'}]
export default nationData;

页面引入:

 页面调用list数组:

组件调用返回list数组:

<u-form-item :label-position="labelPosition" label="民族" prop="nation">
	<u-input :border="border" type="select" :select-open="nationShow" v-model="model.nation" placeholder="请选择民族" @click="nationShow = true"></u-input>
</u-form-item>

<u-select mode="single-column" :list="nationList" v-model="nationShow" @confirm="nationConfirm"></u-select>

回调传值:

nationConfirm(e) {
			e.map((val, index) => {
				this.model.nation = val.label ;
			})
		},

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值